QtQuick 布局边距
QtQuick layout margins
有什么方法可以删除 QML 布局组件中的开始和结束边距吗?
这是一个 ColumnLayout 的例子,其中有几个 children。问题是如何删除顶部和底部边距并沿 parent 布局的全高重新分配所有 children。
ColumnLayout {
id: dotColumn
anchors.horizontalCenter: bg.horizontalCenter
height: root.height
Repeater {
id: repeater
model: root.model
Item {
id: activeDot_container
property int radius: 15
width: radius * 2
height: radius * 2
Rectangle {
anchors.centerIn: parent
radius: parent.radius
width: radius * 2
height: radius * 2
color: Palette.colors['deepPurple']['500']
}
}
}
}
您不能将布局内的项目同时对齐到顶部和底部。作为解决方法,您可以将带有变量 y
的项目放入容器中,如下所示:
Window {
visible: true
visibility: Window.Maximized
ColumnLayout {
anchors.horizontalCenter: parent.horizontalCenter
height: parent.height
spacing:1
Repeater {
id: repeater
model: 10
Rectangle {
color: "green"
property int radius: 15
width: radius
Layout.fillHeight: true
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
y: index * (parent.height - height) / (repeater.count - 1)
radius: parent.radius
width: radius * 2
height: radius * 2
color: "blue"
}
}
}
}
}
经过几次布局定位实验后,我得出了以下解决方案。
假设我要消除的边距大小为布局子元素之间间距的一半,我们可以将负边距设置为布局组件的开头和结尾,将其拉伸直到第一个和最后一个子元素对齐 start/end 的布局。
我用来计算边距的函数:
function getMargin() {
var height = root.height;
var spacing = (height - root.radius * 2 * model.length) / model.length;
return spacing / 2;
}
其中root
是布局组件的父级,root.radius*2
表示布局子项的大小,可以替换为另一个子维度,model.length
表示子项的数量。
那么我们只需要给Layout组件设置anchors,并设置相应的margin就可以了
ColumnLayout {
anchors.top: root.top
anchors.bottom: root.bottom
anchors.topMargin: -1 * getMargin()
anchors.bottomMargin: -1 * getMargin()
Repeater {
model: root.model
Item {
property int radius: root.radius
width: radius * 2
height: radius * 2
/* more code */
}
}
}
P.S。通过用 left/right.
替换布局 top/bottom 锚点,可以将相同的解决方案应用于 RowLayout
有什么方法可以删除 QML 布局组件中的开始和结束边距吗?
这是一个 ColumnLayout 的例子,其中有几个 children。问题是如何删除顶部和底部边距并沿 parent 布局的全高重新分配所有 children。
ColumnLayout {
id: dotColumn
anchors.horizontalCenter: bg.horizontalCenter
height: root.height
Repeater {
id: repeater
model: root.model
Item {
id: activeDot_container
property int radius: 15
width: radius * 2
height: radius * 2
Rectangle {
anchors.centerIn: parent
radius: parent.radius
width: radius * 2
height: radius * 2
color: Palette.colors['deepPurple']['500']
}
}
}
}
您不能将布局内的项目同时对齐到顶部和底部。作为解决方法,您可以将带有变量 y
的项目放入容器中,如下所示:
Window {
visible: true
visibility: Window.Maximized
ColumnLayout {
anchors.horizontalCenter: parent.horizontalCenter
height: parent.height
spacing:1
Repeater {
id: repeater
model: 10
Rectangle {
color: "green"
property int radius: 15
width: radius
Layout.fillHeight: true
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
y: index * (parent.height - height) / (repeater.count - 1)
radius: parent.radius
width: radius * 2
height: radius * 2
color: "blue"
}
}
}
}
}
经过几次布局定位实验后,我得出了以下解决方案。
假设我要消除的边距大小为布局子元素之间间距的一半,我们可以将负边距设置为布局组件的开头和结尾,将其拉伸直到第一个和最后一个子元素对齐 start/end 的布局。
我用来计算边距的函数:
function getMargin() {
var height = root.height;
var spacing = (height - root.radius * 2 * model.length) / model.length;
return spacing / 2;
}
其中root
是布局组件的父级,root.radius*2
表示布局子项的大小,可以替换为另一个子维度,model.length
表示子项的数量。
那么我们只需要给Layout组件设置anchors,并设置相应的margin就可以了
ColumnLayout {
anchors.top: root.top
anchors.bottom: root.bottom
anchors.topMargin: -1 * getMargin()
anchors.bottomMargin: -1 * getMargin()
Repeater {
model: root.model
Item {
property int radius: root.radius
width: radius * 2
height: radius * 2
/* more code */
}
}
}
P.S。通过用 left/right.
替换布局 top/bottom 锚点,可以将相同的解决方案应用于 RowLayout