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占Item尺寸的 1/3 ，GridView占据 2/3 {{ 1}} size。，添加任务截图：我如何实现这样的任务？

Answer 1

在fillWidth的所有fillHeight上使用Item和Layout是问题所在。将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项目大小比例

1 个答案: