项目定位器

定位器项是管理声明性用户界面中项位置的容器项。定位器的行为类似于与标准 Qt 小部件一起使用的布局管理器，但它们本身也是容器。

当需要以正规布局排列许多项时，定位器可以更容易地处理这些项。

Qt Quick Layouts 也可用于在用户界面中排列 Qt Quick 项。它们管理声明性用户界面中项的位置和大小，非常适合可调整大小的用户界面。

定位器

基本 Qt Quick 图形类型集中提供了一系列标准定位器

Column	在其子项中定位为列
Flow	在其子项中侧边定位，必要时换行
Grid	在其子项中定位为网格形状
LayoutMirroring	用于镜像布局行为的属性
Positioner	提供附加属性，包含有关项在定位器中存在位置详细信息
Row	在其子项中定位为行

Column Items

Column 项用于垂直排列项。下面的示例中，使用 Column 项将三个 Rectangle 项排列在外部 Item 定义的区域内。已将 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，如果需要，请将任何背景颜色添加到父 Rectangle。

Row Items

Row 项用于水平排列项。下面的示例中，使用 Row 项将三个圆形 Rectangle 项排列在外部着色 Rectangle 定义的区域内。已将 spacing 属性设置以在矩形之间包含少量的空间。

我们确保父 Rectangle 足够大，以便在水平居中的 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 Items

Grid 项用于在网格或表格布局中放置项。下面的示例中，使用 Grid 项将四个 Rectangle 项放置在一个 2x2 的网格中。与其他定位器一样，可以通过 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 }
    }
}

在项之间插入的水平间距和垂直间距之间没有差异，因此必须在项内部添加任何额外空间。

表格中的空单元格必须通过在Grid定义中的适当位置定义占位符项来创建。

流项

流项用于放置类似于文字的项，使行或列中非重叠的项排列。

流项以类似于网格项的方式排列项，项沿着一个轴（次要轴）成行排列，沿着另一个轴（主要轴）排列的项行相邻。流动方向以及项之间的间距由流动和间距属性控制。

以下示例显示了包含多个文字子项的流项。它们的排列方式与截图所示类似。

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

网格定位符与流定位符之间的主要区别是，当流项在次要轴上空间不足时，它们将自动换行，并且如果项的大小不统一，则一行中的项可能与另一行中的项不对齐。像网格项一样，无法独立控制项之间的间距和行之间的间距。

其他定位项的方法

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