如何为 QML 布局中的项目提供特定间距? [英] How to give specific spacing to items in a QML layout?
问题描述
我有一个 ColumnLayout
,它的锚点设置为 anchor.fill: parent
,因此它已经有一个设置维度,这取决于它的父维度.
如何将 Rectangles
添加到这个 ColumnLayout
中,从上到下具有 特定 间距?
现在我有这个:
ColumnLayout {anchors.fill:父级间距:2长方形 {高度:50宽度:50红色"}长方形 {高度:50宽度:50颜色:绿色"}长方形 {高度:50宽度:50颜色:蓝色"}}
但不是让矩形从上到下间隔 2
,而是在 ColumnLayout
中均匀地布局 Rectangle
.>
一种解决方案是将第一个矩形锚定到父级的顶部,并将其余矩形一个接一个地锚定,但如果可能,我想避免这种情况.
与之前的定位器(例如 Column
或 Row
)不同,引入了布局以支持图形缩放UI,也通过填充可用空间(在这种特定情况下填充其父级).从这个意义上说,spacing
属性不应被视为 Item
之间间距的严格上限,而应视为它们之间的最小允许距离.
目前解决您的问题的方法是使用填充程序"Item
,它使用 fillHeight
属性.这个 Item
占据了布局内其他 Item
留下的所有空间,因此根据需要将它们打包在一起:
导入QtQuick 2.5导入 QtQuick.Window 2.2窗户 {可见:真实宽度:100高度:200列布局{anchors.fill:父级间距:2长方形 {高度:50宽度:50红色"}长方形 {高度:50宽度:50颜色:绿色"}长方形 {高度:50宽度:50颜色:蓝色"}Item { Layout.fillHeight: true }//<-- 此处填充}}
请注意,您可以利用相同的方法并在布局的开头添加一个填充符,以垂直居中子Item
.最后,请注意,在这种情况下,建议使用 Column
按预期正确放置 Item
,而忽略剩余的可用空间.
做出你的选择.
<小时>应该注意的是,虽然这种方法有效,Layout
s 提供了很多属性来控制 Item
s 的大小.有关该主题的一些见解,请参阅其他答案.
I have a ColumnLayout
, which has its anchor set to anchor.fill: parent
, therefore it has already a set dimension, which depends on its parent dimension.
How can I add Rectangles
into this ColumnLayout
, with a specific spacing from top to bottom?
Right now I have this:
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"
}
}
But instead of having the rectangles from top to bottom with a spacing 2
it layouts the Rectangle
s evenly in the ColumnLayout
.
One solution would be to anchor the first rectangle to the parent's top and the anchor the rest of the rectangles one after the other, but I would like to avoid this if possible.
Differently from previous positioners, such as Column
or Row
, layouts were introduced to support graphical scaling of UI, also by filling available space (in this specific case fill their parent). In that sense the spacing
property should not be seen as a strict upper bound to the spacing between Item
s but as the minimum allowed distance between them.
The current approach to solve your issue is to use a "filler" Item
, which uses the fillHeight
property. This Item
occupies all the space left by the other Item
s inside the layout thus packing them together, as needed:
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
}
}
Note that you can exploit the same approach and add a filler at the beginning of the layout to vertically center the children Item
s. Finally, note that in this case it would be advisable to use a Column
which lays down the Item
s correctly as expected, disregarding the available space left.
Just make your choice.
It should be noted that while this approach works Layout
s provide a lot of properties to control the size of the Item
s. Please refer to the other answer for some insight on the subject.
这篇关于如何为 QML 布局中的项目提供特定间距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!