java gridlayout 设置列宽,Qml GridLayout如何指定列宽？

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

Here is my code:

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"; }

}

}

}

}

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.

Result:

It is a way to do this ?

解决方案

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.

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 }

}

}

}

}