Qml GridLayout如何指定列宽? [英] Qml GridLayout how to specify a column width?

问题描述

我有一列有两个groupbox，每个都有一个GridLayout.

I have a column with two groupbox which each have a GridLayout.

这是我的代码:

 Window {
    visible: true
    width: 500
    height: 480
    title: qsTr("GridLayoutTest")
Column
{
    GroupBox
    {
        contentWidth: gl1_.width
        contentHeight: gl1_.height
            GridLayout
            {
                id: gl1_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 50; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
    GroupBox
    {
        contentWidth: gl2_.width
        contentHeight: gl2_.height
            GridLayout
            {
                id: gl2_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 35; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
}

}

我的问题如下:每个gridLayout都有自己的对齐方式，而我所有正确的元素均未正确对齐.我希望所有正确的元素都具有相同的对齐方式.

My problem is the following: each gridLayout have his own alignment and all my right elements are not correctly aligned. I want to have the same alignment for all my right elements.

结果:

这是一种方法吗?

推荐答案

好的，您在尺寸上存在一些问题.您将GridLayout宽度定义为200px，但还定义了项目的大小，例如第一行id 60 + 25 = 85，而不是200.因此，布局必须以某种方式对其进行修复.我猜是根据物品的大小，它可以拉伸细胞.

Ok, you have some problem with the sizes. You define your GridLayout width as 200px but also you define sizes for items, for example the first row id 60 + 25 = 85, not 200. So the layout has to fix it somehow. It stretches the cells, I guess according to items sizes.

因此，必须为所有布局的第一列设置固定大小.您可以用Item包裹的第二列的剩余空间:

So you have to set fixed size for the first column for all the layouts. The remaining space of the 2nd column you could wrap with Item:

Column {
    anchors.fill: parent
    anchors.margins: 20
    GroupBox {
        id: box1
        title: "group 1"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 180 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 60 }
            }
        }
    }
    GroupBox {
        id: box2
        title: "group 2"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 80 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 120 }
            }
        }
    }
}

这篇关于Qml GridLayout如何指定列宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！