项目定位器

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

当需要将许多项目按常规布局排列时，定位器可使处理这些项目变得更容易。

Qt Quick Layouts定位器还可用于在用户界面中排列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.