Qml GridLayout如何指定列宽？答案

【问题标题】：Qml GridLayout how to specify a column width?Qml GridLayout如何指定列宽？
【发布时间】：2019-04-08 20:37:47
【问题描述】：

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

结果：

这是一种方法吗？

【问题讨论】：

将GridLayout 放入Item 在这里完全没有意义。另一点是您应该使用诸如Layout.preferredWidth 之类的布局附件属性来指定网格的元素大小，而不是使用宽度/高度。
您好，感谢您的回答。我删除了项目并使用了 Layout.preferredWidth/Height。不幸的是，它什么也没改变。我的右元素仍未对齐。
你也应该更新你的代码示例。
是的，对不起。完成了。
好的，现在你能解释一下“我的右边元素没有正确对齐”是什么意思吗？目前根本没有对齐。你要存档什么？一些草图会很棒。

标签： qt qml grid-layout column-width

【解决方案1】：

好的，您的尺寸有些问题。您将 GridLayout 宽度定义为 200px，但您还定义了项目的大小，例如第一行 id 60 + 25 = 85，而不是 200。所以布局必须以某种方式修复它。它会拉伸单元格，我猜是根据项目大小。

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

【讨论】：

完美！非常感谢！ :)