Qml GridLayout如何指定列宽？

Posted 2023-03-11

【中文标题】Qml GridLayout如何指定列宽？

【英文标题】：Qml GridLayout how to specify a column width?

【发布时间】：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。不幸的是，它什么也没改变。我的右元素仍未对齐。

你也应该更新你的代码示例。

是的，对不起。完成了。

好的，现在你能解释一下“我的右边元素没有正确对齐”是什么意思吗？目前根本没有对齐。你要存档什么？一些草图会很棒。

【参考方案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 
            
        
    

【讨论】：

完美！非常感谢 ！ :)