如何为 QML 布局中的项目指定特定间距?
How to give specific spacing to items in a QML layout?
我有一个 ColumnLayout
,它的锚点设置为 anchor.fill: parent
,因此它已经有一个设置的维度,这取决于它的父维度。
如何将 Rectangles
添加到此 ColumnLayout
中,从上到下具有 特定的 间距?
现在我有这个:
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
}
但不是让矩形从上到下的间距为 2
,而是将 Rectangle
均匀地布置在 ColumnLayout
.
中
一个解决方案是将第一个矩形锚定到父级的顶部,然后将其余矩形依次锚定,但我想尽可能避免这种情况。
与以前的定位器不同,例如 Column
或 Row
,引入布局以支持 UI 的图形缩放,也通过 填充 可用 space(在这种情况下填写他们的 parent)。从这个意义上说,spacing
属性 不应被视为 Item
之间间距的严格上限,而是 之间允许的最小距离 他们。
目前解决您问题的方法是使用 "filler" Item
,它使用 fillHeight
属性。这个 Item
占据布局内其他 Item
留下的所有 space,因此根据需要将它们打包在一起:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 100
height: 200
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
Item { Layout.fillHeight: true } // <-- filler here
}
}
请注意,您可以利用相同的方法并在布局的开头添加一个填充符以使 children Item
垂直居中。最后,请注意,在这种情况下,建议使用 Column
,它会按预期正确放置 Item
,而忽略可用的 space 剩余。
只做你的选择。
需要注意的是,虽然这种方法有效,但 Layout
s 提供了很多属性来控制 Item
s 的大小。请参阅 以了解有关该主题的一些见解。
接受的答案是一种有效的方法,但是,还有其他方法。
1)ColumnLayout
自己决定身高
如果您只是想将项目从上到下放在一列中,则无需强制 ColumnLayout
.
的高度
而不是
anchors.fill: parent
采用
width: parent.width
并让 ColumnLayout 自行调整大小以适合其内容,如下所示:
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 100
height: 200
ColumnLayout {
width: parent.width
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
}
}
2) ColumnLayout 调整项目的大小以达到所需的间距。
如果项目太多或太少而无法完美填充布局,您可以允许布局调整项目的大小(而不是调整间距)。
以下附加属性控制布局如何处理您的项目,以决定哪些内容可以拉伸或收缩以适应布局:
Layout.preferredHeight
Layout.minimumHeight
Layout.maximumHeight
Layout.fillHeight
示例,其中 Rectangle
s 被稍微放大以达到所需的间距:
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 100
height: 200
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "red"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "green"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "blue"
}
}
}
我有一个 ColumnLayout
,它的锚点设置为 anchor.fill: parent
,因此它已经有一个设置的维度,这取决于它的父维度。
如何将 Rectangles
添加到此 ColumnLayout
中,从上到下具有 特定的 间距?
现在我有这个:
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
}
但不是让矩形从上到下的间距为 2
,而是将 Rectangle
均匀地布置在 ColumnLayout
.
一个解决方案是将第一个矩形锚定到父级的顶部,然后将其余矩形依次锚定,但我想尽可能避免这种情况。
与以前的定位器不同,例如 Column
或 Row
,引入布局以支持 UI 的图形缩放,也通过 填充 可用 space(在这种情况下填写他们的 parent)。从这个意义上说,spacing
属性 不应被视为 Item
之间间距的严格上限,而是 之间允许的最小距离 他们。
目前解决您问题的方法是使用 "filler" Item
,它使用 fillHeight
属性。这个 Item
占据布局内其他 Item
留下的所有 space,因此根据需要将它们打包在一起:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 100
height: 200
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
Item { Layout.fillHeight: true } // <-- filler here
}
}
请注意,您可以利用相同的方法并在布局的开头添加一个填充符以使 children Item
垂直居中。最后,请注意,在这种情况下,建议使用 Column
,它会按预期正确放置 Item
,而忽略可用的 space 剩余。
只做你的选择。
需要注意的是,虽然这种方法有效,但 Layout
s 提供了很多属性来控制 Item
s 的大小。请参阅
接受的答案是一种有效的方法,但是,还有其他方法。
1)ColumnLayout
自己决定身高
如果您只是想将项目从上到下放在一列中,则无需强制 ColumnLayout
.
而不是
anchors.fill: parent
采用
width: parent.width
并让 ColumnLayout 自行调整大小以适合其内容,如下所示:
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 100
height: 200
ColumnLayout {
width: parent.width
spacing: 2
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
height: 50
width: 50
color: "green"
}
Rectangle {
height: 50
width: 50
color: "blue"
}
}
}
2) ColumnLayout 调整项目的大小以达到所需的间距。
如果项目太多或太少而无法完美填充布局,您可以允许布局调整项目的大小(而不是调整间距)。
以下附加属性控制布局如何处理您的项目,以决定哪些内容可以拉伸或收缩以适应布局:
Layout.preferredHeight
Layout.minimumHeight
Layout.maximumHeight
Layout.fillHeight
示例,其中 Rectangle
s 被稍微放大以达到所需的间距:
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 100
height: 200
ColumnLayout {
anchors.fill: parent
spacing: 2
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "red"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "green"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredHeight: 50
width: 50
color: "blue"
}
}
}