ColumnLayout 项目大小比例

Question

我有 QML Item 和一个 ListView（Item 的底部）和一个 GridView（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
}

我想降低 ListView 占据 1/3 的 Item 尺寸，GridView 占据 2/3 大小 Item。，添加任务截图：我如何完成这样的任务？

Answer 1

在我的 Layout 的所有 Item 上使用 fillWidth 和 fillHeight 是问题所在。将 preferredHeight 设置为 parent.height/3 并将另一个设置为 fillHeigh 解决了我的问题。

这是工作代码：

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
}

ColumnLayout 项目大小比例

ColumnLayout items size proportions

qml

qt5

qtquick2