Qml GridLayout如何指定列宽?
Qml GridLayout how to specify a column width?
我有一个包含两个 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
宽度定义为 200px,但您还定义了项目的大小,例如第一行 id 60 + 25 = 85,而不是 200。因此布局必须以某种方式修复它。它会拉伸单元格,我猜是根据项目大小。
因此您必须为所有布局的第一列设置固定大小。第 2 列的剩余 space 可以用 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 }
}
}
}
}
我有一个包含两个 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
宽度定义为 200px,但您还定义了项目的大小,例如第一行 id 60 + 25 = 85,而不是 200。因此布局必须以某种方式修复它。它会拉伸单元格,我猜是根据项目大小。
因此您必须为所有布局的第一列设置固定大小。第 2 列的剩余 space 可以用 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 }
}
}
}
}