qt - Qml GridLayout如何指定列宽？

Question

我有一列有两个 groupbox其中每个都有一个 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有他自己的对齐方式，我所有正确的元素都没有正确对齐。我希望所有正确的元素都具有相同的对齐方式。

结果:



这是一种方法吗？

Answer 1

好的，你的尺寸有问题。你定义你的GridLayout宽度为 200 像素，但您也可以定义项目的大小，例如第一行 id 60 + 25 = 85，而不是 200。所以布局必须以某种方式修复它。它会拉伸(stretch)细胞，我猜是根据元素的大小。

因此，您必须为所有布局的第一列设置固定大小。您可以用 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 }
            }
        }
    }
}