问题
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 ?
回答1:
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 }
}
}
}
}
来源:https://stackoverflow.com/questions/53155188/qml-gridlayout-how-to-specify-a-column-width