基础说明

有许多QML元素可用于项目定位。这些称为定位器，其中QtQuick模块提供以下内容：Row，Column，Grid和Flow。在下面的插图中可以看到它们显示了相同的内容。 :::success 我们在详细介绍之前，让我介绍一些辅助元素：红色，蓝色，绿色，较亮和较暗的方块。这些组件中的每一个都包含一个48x48像素凸起的矩形。作为参考，这里是RedSquare的源代码： :::

  1. // RedSquare.qml
  2. import QtQuick
  4. Rectangle {
  5.     width: 48
  6.     height: 48
  7.     color: "#ea7025"
  8.     border.color: Qt.lighter(color)
  9. }
  11. //GreenSquare.qml
  12. import QtQuick
  14. Rectangle {
  15.     width: 48
  16.     height: 48
  17.     color: "#228B22"
  18.     border.color: Qt.lighter(color)
  19. }
  21. //BlueSquare.qml
  22. import QtQuick
  24. Rectangle {
  25.     width: 48
  26.     height: 48
  27.     color: "#1E90FF"
  28.     border.color: Qt.lighter(color)
  29. }

请注意，在填充颜色的基础上，使用Qt.llighter(color)来产生一个较浅的边框颜色。在下面的示例中，我们将使用这些辅助程序，使源代码更加紧凑和可读。请记住，每个矩形最初是48x48像素。

Column定位

  1. // ColumnExample.qml
  3. import QtQuick
  5. Rectangle {
  6.     id: root
  7.     width: 120
  8.     height: 240
  10.     Column {
  11.         id: row
  12.         anchors.centerIn: parent
  13.         spacing: 8
  14.         RedSquare { }
  15.         GreenSquare { width: 96 }
  16.         BlueSquare { }
  17.     }
  18. }

结果：
image.png

Row定位

Row元素将其子项目彼此相邻放置，根据layoutDirectio属性从左到右或从右到左。同样，spacing用于分隔子项。

  1. // RowExample.qml
  3. import QtQuick
  5. Rectangle {
  6.     id: root
  7.     width: 400; height: 120
  9.     Row {
  10.         id: row
  11.         anchors.centerIn: parent
  12.         spacing: 20
  13.         BlueSquare { }
  14.         GreenSquare { }
  15.         RedSquare { }
  16.     }
  17. }

结果：
image.png

Grid定位

Grid元素在网格中排列它的子元素。通过设置Row和Columns属性，可以限制行或列的数量。如果不设置它们中的任何一个，则另一个将根据子项目的数量计算。
例如，将行设置为3并添加6个子项将生成2列。属性flow和layoutDirection用于控制将项目添加到网格中的顺序，而spacing控制子项目之间的间距。

  1. // ColumnExample.qml
  3. import QtQuick
  5. Rectangle {
  6.     id: root
  7.     width: 160
  8.     height: 160
  10.     Grid {
  11.         id: grid
  12.         rows: 2
  13.         columns: 2
  14.         anchors.centerIn: parent
  15.         spacing: 8
  16.         RedSquare { }
  17.         RedSquare { }
  18.         RedSquare { }
  19.         RedSquare { }
  20.     }
  21. }

结果：
image.png

Flow定位

最后的定位器是Flow。它将其子项添加到流中。使用flow和layoutDirection控制流的方向。它可以横着布局，也可以从上到下。
它也可以从左向右或相反的方向运行。在流中添加项时，将根据需要对它们进行包装以形成新的行或列。为了让流工作，它必须有一个宽度或高度。这可以直接设置，或通过锚布局。 :::success 子元素Sequare做了简单更改，增加了序号，让特性显示的更明显。这里仅列出RedSquare.qml，其他两个也做类型更改，增加Text设置 :::

  1. //RedSquare.qml
  2. import QtQuick
  4. Rectangle {
  5.     id:root
  6.     width: 48
  7.     height: 48
  8.     color: "#8B0000"
  9.     property string showText: ""
  10.     Text {
  11.         id: label
  12.         anchors.centerIn: parent
  13.         text:root.showText
  14.     }
  15.     border.color: Qt.lighter(color)
  16. }
  1. // ColumnExample.qml
  3. import QtQuick
  5. Rectangle {
  6.     id: root
  7.     width: 160
  8.     height: 160
  10.     Flow {
  11.         anchors.fill: parent
  12.         anchors.margins: 20
  13.         spacing: 20
  14.         RedSquare {showText:"1" }
  15.         BlueSquare { showText:"2" }
  16.         GreenSquare { showText:"3" }
  17.         BlueSquare { showText:"4" }
  18.         GreenSquare { showText:"5" }
  19.         RedSquare {showText:"6"  }
  20.         BlueSquare { showText:"7" }
  21.     }
  22. }

结果：
动画.gif

Repeater

中继器经常和定位器一起使用。它的工作方式类似于for循环，在模型上进行迭代。在最简单的情况下，模型只是一个提供循环次数的值。

  1. // RepeaterExample.qml
  3. import QtQuick
  5. DarkSquare {
  6.     id: root
  7.     width: 252
  8.     height: 252
  9.     property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
  11.     Grid{
  12.         anchors.fill: parent
  13.         anchors.margins: 8
  14.         spacing: 4
  15.         Repeater {
  16.             model: 16
  17.             delegate: Rectangle {
  18.                 required property int index
  19.                 property int colorIndex: Math.floor(Math.random()*3)
  21.                 width: 56; height: 56
  22.                 color: root.colorArray[colorIndex]
  23.                 border.color: Qt.lighter(color)
  25.                 Text {
  26.                     anchors.centerIn: parent
  27.                     color: "#f0f0f0"
  28.                     text: "Cell " + parent.index
  29.                 }
  30.             }
  31.         }
  32.     }
  33. }

结果：
image.png
在这个中继器示例中，我们使用了一些新的魔法。我们定义了自己的颜色数组属性，它是一个颜色数组。中继器创建一系列矩形（由模型定义16 个）。
对于每个循环，它创建由转发器的子节点定义的矩形。在矩形中，我们使用 JS 数学函数选择颜色：Math.floor(Math.random()\*3)。这为我们提供了一个范围为0..2 的随机数，我们用它来从颜色数组中选择颜色。如前所述，Java Script 是 Qt Quick 的核心部分，因此我们可以使用标准库。
转发器将index属性注入转发器。它包含当前循环索引。(0,1,..15)。我们可以使用它根据索引做出我们自己的决定，或者在我们的例子中使用 Text元素可视化当前索引。 :::success 虽然index属性被动态注入到Rectangle中，但最好将其声明为必需属性，以简化可读性和帮助工具。这是通过必需的属性required property int index实现的。 ::: :::success 使用更高级的动态委托处理更大的模型和动态视图将在模型视图一章中介绍。当有少量静态数据要显示时，最好使用中继器。 :::