项目定位器
定位器项是一种容器项，用于在声明式用户界面中管理项的位置。定位器的行为与标准 Qt Widgets 中使用的布局管理器类似，不同之处在于它们本身也是容器。
当需要将多个项目以规则布局排列时，定位器能让操作变得更加轻松。
Qt Quick Layouts 也可用于在用户界面中排列Qt Quick 项。它们管理声明式用户界面中项的位置和大小，非常适合可调整大小的用户界面。
定位器
Qt Quick 图形类型的基本集合中提供了一组标准定位器：
将子元素排列成一列 | |
将子元素并排排列，必要时自动换行 | |
将子元素以网格形式排列 | |
用于镜像布局行为的属性 | |
提供附着属性，其中包含项目在定位器中的具体位置信息 | |
将子元素排列成行 |
列项
Column 项用于垂直排列项目。以下示例使用一个 Column 项，在由外部Item 定义的区域内排列三个Rectangle 项。将spacing 属性设置为在矩形之间留出少量间距。
import QtQuick
Item {
width: 310; height: 170
Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
Rectangle { color: "lightblue"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Books" } }
Rectangle { color: "gold"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Music" } }
Rectangle { color: "lightgreen"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Movies" } }
}
}请注意，由于“列”直接继承自“项”，因此若需添加背景色，必须将其应用于父级矩形。
行项
Row 项用于水平排列项目。以下示例使用一个“行”项，在由外部彩色“矩形”定义的区域内排列三个圆角“Rectangle ”项。将“spacing ”属性设置为在矩形之间留出少量空间。
我们确保父级矩形足够大，以便在水平居中的行项边缘留出一些空间。
import QtQuick
Rectangle {
width: 320; height: 110
color: "#c0c0c0"
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
Rectangle { width: 100; height: 100; radius: 20.0
color: "#024c1c" }
Rectangle { width: 100; height: 100; radius: 20.0
color: "#42a51c" }
Rectangle { width: 100; height: 100; radius: 20.0
color: "white" }
}
}网格控件
Grid 项用于将项目以网格或表格形式排列。以下示例使用一个 Grid 项，将四个Rectangle 项放置在一个 2×2 的网格中。与其他定位器一样，可通过spacing 属性指定项目之间的间距。
import QtQuick
Rectangle {
width: 112; height: 112
color: "#303030"
Grid {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
columns: 2
spacing: 6
Rectangle { color: "#aa6666"; width: 50; height: 50 }
Rectangle { color: "#aaaa66"; width: 50; height: 50 }
Rectangle { color: "#9999aa"; width: 50; height: 50 }
Rectangle { color: "#6666aa"; width: 50; height: 50 }
}
}项目之间插入的水平间距与垂直间距并无区别，因此任何额外间距都必须在项目内部添加。
网格中的任何空单元格都必须通过在网格定义的适当位置定义占位项来创建。
流式项目
Flow 流式项目用于将项目（如单词）放置在页面上，形成行或列且不重叠。
流式项目（Flow items）的排列方式与文本流项目（Grid ）类似：项目沿一个轴（次轴）排成行，而各行项目又沿另一个轴（主轴）并排排列。流向以及项目之间的间距由flow 和spacing 属性控制。
以下示例展示了一个包含多个Text 子项的Flow项。这些子项的排列方式与截图中所示类似。
import QtQuick
Rectangle {
color: "lightblue"
width: 300; height: 200
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Text { text: "Text"; font.pixelSize: 40 }
Text { text: "items"; font.pixelSize: 40 }
Text { text: "flowing"; font.pixelSize: 40 }
Text { text: "inside"; font.pixelSize: 40 }
Text { text: "a"; font.pixelSize: 40 }
Text { text: "Flow"; font.pixelSize: 40 }
Text { text: "item"; font.pixelSize: 40 }
}
}Grid和Flow定位器的主要区别在于：Flow中的项目在次轴上空间不足时会自动换行；如果项目大小不一，同一行上的项目可能无法与另一行上的项目对齐。与Grid项目一样，无法独立控制项目之间以及项目行之间的间距。
其他项目定位方式
在用户界面中，还有其他几种元素定位方式。除了直接指定坐标这一基本技术外，还可以通过锚点将元素相对于其他元素进行定位，或者结合QML 数据模型（如对象模型）进行定位。
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
