项目定位器¶

定位器¶

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

qml-qtquick-layoutmirroring.html	用于镜像布局行为的属性。
qml-qtquick-positioner.html	提供附加属性，包含有关项目在定位器中存在位置的详细信息。
qml-qtquick-column.html	将其子元素排列成一列。
qml-qtquick-row.html	将其子元素排列成一行。
qml-qtquick-grid.html	将其子元素以网格形式排列。
qml-qtquick-flow.html	将其子元素并排放置，必要时进行换行。

列项目¶

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

请注意，由于Column直接继承自Item，如果需要背景颜色，必须将其添加到父级Rectangle中。

行项目¶

Row 项目用于水平排列项目。以下示例使用 Row 项目在由外部彩色 Rectangle 定义的区域内排列三个圆角 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 项目放置在 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 }
    }
}

项目之间插入的水平间距和垂直间距没有区别，因此任何额外的间距必须添加到项目本身内部。

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

流程项¶

Flow 项目用于在页面上放置像单词这样的项目，具有不重叠项目的行或列。

流式项目以一种类似于网格项目的方式排列项目，项目沿着一个轴（次要轴）排列成行，而项目行沿着另一个轴（主要轴）彼此相邻放置。流动方向以及项目之间的间距由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数据模型（如对象模型）一起使用。