Qt6 QML Book/Quick入门/定位器元素类型

Positioning Elements

 

定位器元素类型

There are a number of QML elements used to position items. These are called positioners, of which the Qt Quick module provides the following: Row, Column, Grid and Flow. They can be seen showing the same contents in the illustration below.

有许多QML元素类型用于项的位置定位。这些元素类型被称为定位器，Qt Quick模块提供了以下定位器:Row（行定位器）, Column（列定位器）, Grid（网格定位器） and Flow（流布局定位器）。在下面的插图中，可以看到相同项的定位效果。

TIP

注

Before we go into details, let me introduce some helper elements: the red, blue, green, lighter and darker squares. Each of these components contains a 48x48 pixel colorized rectangle. As a reference, here is the source code for the RedSquare:

在详细介绍之前，让我先介绍一些辅助元素对象:红、蓝、绿、亮、暗方块。每个组件都包含一个48 × 48像素的彩色矩形。作为参考，这里是RedSquare.qml的源代码

// RedSquare.qml

import QtQuick

Rectangle {
    width: 48
    height: 48
    color: "#ea7025"
    border.color: Qt.lighter(color)
}

Please note the use of Qt.lighter(color) to produce a lighter border color based on the fill color. We will use these helpers in the next examples to make the source code more compact and readable. Please remember, each rectangle is initially 48x48 pixels.

请注意使用Qt.lighter(color)来根据填充色产生较浅的边框颜色。 在下一个示例中，我们将使用这个组件使程序源代码更加紧凑和易读。 请记住，每个矩形最初是48x48像素。  

The Column element arranges child items into a column by stacking them on top of each other. The spacing property can be used to distance each of the child elements from each other.

Column元素类型，通过将子项堆叠，将它们排列到一个列中。可以使用spacing属性来设置每个子元素对象的间隔。

// ColumnExample.qml

import QtQuick

DarkSquare {
    id: root
    width: 120
    height: 240

    Column {
        id: row
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        GreenSquare { width: 96 }
        BlueSquare { }
    }
}

The Row element places its child items next to each other, either from the left to the right, or from the right to the left, depending on the layoutDirection property. Again, spacing is used to separate child items.

Row元素类型将其子项目一个挨一个地放置，根据layoutDirection属性不同，可以从左到右排列，也可以从右到左排列。同样，spacing属性用于设置子项的间隔。

// RowExample.qml

import QtQuick

BrightSquare {
    id: root
    width: 400; height: 120

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 20
        BlueSquare { }
        GreenSquare { }
        RedSquare { }
    }
}

The Grid element arranges its children in a grid. By setting the rows and columns properties, the number of rows or columns can be constrained. By not setting either of them, the other is calculated from the number of child items. For instance, setting rows to 3 and adding 6 child items will result in 2 columns. The properties flow and layoutDirection are used to control the order in which the items are added to the grid, while spacing controls the amount of space separating the child items.

Grid元素类型在网格中排列它的子元素。通过设置行（rows）和列（columns）属性，可以指定行数或列数。若不设置其中一个，另一个将从子项的数量中计算出来。例如，将行设置为3并添加6个子项目将得到2列。属性flow和layoutDirection用于控制项目添加到网格中的顺序，而spacing则控制子项目之间的间距。

// GridExample.qml

import QtQuick

BrightSquare {
    id: root
    width: 160
    height: 160

    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

}

The final positioner is Flow. It adds its child items in a flow. The direction of the flow is controlled using flow and layoutDirection. It can run sideways or from the top to the bottom. It can also run from left to right or in the opposite direction. As the items are added in the flow, they are wrapped to form new rows or columns as needed. In order for a flow to work, it must have a width or a height. This can be set either directly, or though anchor layouts.

最后一个定位器是Flow。它将其子项添加到流中。使用flow和layoutDirection控制流的方向。它可以横向运行或从顶部到底部。它也可以从左向右或在相反的方向运行。在向流中添加项目时，会根据需要，形成新的行或列。为了使流正常工作，必须有宽度或高度。这可以直接设置，也可以通过锚布局设置。

// FlowExample.qml

import QtQuick

BrightSquare {
    id: root
    width: 160
    height: 160

    Flow {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RedSquare { }
        BlueSquare { }
        GreenSquare { }
    }
}

An element often used with positioners is the Repeater. It works like a for-loop and iterates over a model. In the simplest case a model is just a value providing the number of loops.

与定位器元素类型一起经常使用元素类型是重复器。它的工作方式类似于for循环，并在模型上迭代。在最简单的情况下，模型只是一个提供循环次数的值。

// RepeaterExample.qml

import QtQuick

DarkSquare {
    id: root
    width: 252
    height: 252
    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]

    Grid{
        anchors.fill: parent
        anchors.margins: 8
        spacing: 4
        Repeater {
            model: 16
            delegate: Rectangle {
                required property int index
                property int colorIndex: Math.floor(Math.random()*3)

                width: 56; height: 56
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)

                Text {
                    anchors.centerIn: parent
                    color: "#f0f0f0"
                    text: "Cell " + parent.index
                }
            }
        }
    }
}

In this repeater example, we use some new magic. We define our own colorArray property, which is an array of colors. The repeater creates a series of rectangles (16, as defined by the model). For each loop, it creates the rectangle as defined by the child of the repeater. In the rectangle we chose the color by using JS math functions: Math.floor(Math.random()\*3). This gives us a random number in the range from 0..2, which we use to select the color from our color array. As noted earlier, JavaScript is a core part of Qt Quick, and as such, the standard libraries are available to us.

在这个重复器示例中，我们使用了一些新的魔法。我们定义了自己的colorArray属性，它是一个颜色数组。重复器创建一系列矩形(共16个，由模型定义)。对于每个循环，它创建由重复器的子节点定义的矩形。在矩形中，我们使用JS的数学函数Math.floor(Math.random()\*3)选择颜色。这给了我们一个范围从0-2随机数，我们用它来从颜色数组中选择颜色。正如前面提到的，JavaScript是Qt Quick的核心部分，因此，我们可以使用标准库。

A repeater injects the index property into the repeater. It contains the current loop-index. (0,1,..15). We can use this to make our own decisions based on the index, or in our case to visualize the current index with the Text element.

重复器将索引属性注入到重复器中。它包含当前的循环索引。(0,1,..15)。我们可以使用它来根据索引做自己的处理，或者在本例中使用Text元素类型可视化当前索引。

TIP

注

While the index property is dynamically injected into the Rectangle, it is a good practice to declare it as a required property to ease readability and help tooling. This is achieved by the required property int index line.

虽然可以将索引（index）属性动态地注入到Rectangle中，但最好将其声明为必需属性（required property），以简化可读性或方便帮助工具。这是通过required property int index行来实现的。

TIP

注

More advanced handling of larger models and kinetic views with dynamic delegates is covered in its own model-view chapter. Repeaters are best used when having a small amount of static data to be presented.

更多高级的用法，如动态委托处理大模型和动态视图的方法，在模型-视图章节中介绍。重复器最好在有少量静态数据要呈现时使用。

示例源码下载