ColumnLayout items size proportions - qml

Question

I have QML Item with one ListView (bottom part of Item) and one GridView (upper part of Item:
import QtQuick 2.5
import QtQuick.Layouts 1.2
Item
{
width: 768
height: 512
ColumnLayout
{
id: ueCentralWidget
anchors.centerIn: parent
anchors.fill: parent
spacing: 8
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
border.color: "#4682b4"
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.centerIn: parent
anchors.fill: parent
UeProductSelector
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
clip: true
} // UeProductSelector
UeCategorySelector
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
clip:true
} // UeCategorySelector
} // ColumnLayout
} // Rectangle
} // ColumnLayout
}
I want to lower ListView occupy 1/3 of Item size and GridView occupy 2/3 of Item size., Adding task screenshot:
How do I achieve such task?

Answer 1

Using fillWidth and fillHeight on all Items of my Layout was the problem. Setting the preferredHeight to parent.height/3 and leaving the other with fillHeigh solved the issue for me.
Here is the working code:
import QtQuick 2.5
import QtQuick.Layouts 1.2
Item
{
width: 768
height: 512
ColumnLayout
{
id: ueCentralWidget
anchors.centerIn: parent
anchors.fill: parent
spacing: 8
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
border.color: "#4682b4"
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.centerIn: parent
anchors.fill: parent
UeProductSelector
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
clip: true
} // UeProductSelector
UeCategorySelector
{
Layout.fillWidth: true
Layout.preferredHeight: parent.height/3
Layout.margins: 8
antialiasing: true
clip:true
} // UeCategorySelector
} // ColumnLayout
} // Rectangle
} // ColumnLayout
}