项目定位器

定位器项目是一种容器项目，用于管理声明式用户界面中项目的位置。定位器的行为方式与标准 Qt Widgets 中使用的布局管理器类似，只是它们本身也是容器。

当需要在常规布局中排列多个项目时，定位器会使处理这些项目变得更容易。

Qt Quick 布局也可用于在用户界面中安排项目。它们可以管理声明式用户界面中项目的位置和大小，非常适合可调整大小的用户界面。Qt Quick

定位器

Qt Quick 图形类型的基本集合中提供了一组标准定位器：

Column	在一列中定位其子项
Flow	将其子节点并排定位，必要时进行包裹
Grid	以网格形式定位其子节点
LayoutMirroring	用于反映布局行为的属性
Positioner	提供附加属性，其中包含项目在定位器中存在位置的详细信息
Row	在一行中定位其子项

列项目

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" } }
    }
}

请注意，由于 Column 直接继承自 Item，因此如果需要，任何背景颜色都必须添加到父矩形中。

行项

Row 项用于水平排列项目。下面的示例使用 Row 项目在外部彩色 Rectangle 定义的区域中排列三个圆形项目。属性设置为在矩形之间留出少量空间。Rectangle spacing

我们要确保父矩形足够大，以便在水平居中的 Row 项边缘留出一些空间。

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 项目用于将项目放置在网格或表格中。下面的示例使用网格项在 2×2 的网格中放置了四个项目。与其他定位器一样，可以使用属性指定项目之间的间距。Rectangle 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 项目用于将项目像文字一样放置在页面上，每行或每列都有不重叠的项目。

流项目排列项目的方式与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 }
    }
}

网格定位器和 Flow 定位器的主要区别在于，Flow 内的项目在小轴上的空间用完时将会缠绕，如果一行中的项目大小不一致，则可能无法与另一行中的项目对齐。与网格项目一样，项目之间和项目行之间的间距也无法独立控制。

其他项目定位方法

在用户界面中定位项目还有其他几种方法。除了直接指定其坐标的基本技术外，它们还可通过锚点与其他项目相对定位，或与QML 数据模型（如对象模型）一起使用。

使用锚点从右至左定位用户界面

© 2025 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.