QML编程中可以使用x、y属性手动布局元素，但这些属性是与元素父对象左上角位置紧密相关的，不容易确定各子元素间的相对位置。为此，QML提供了定位器和锚点来简化元素的布局。

定位器是QML中专用于定位的一类元素，主要有Row、Column、Grid和Flow等，它们都包含在QtQuick模块中。

1.行列、网格定位

行列和网格定位分别使用Row、Column和Grid元素，运行效果如图所示。

具体实现步骤如下。

(1) 新建QML应用程序，项目名称为“Positioner”。

(2) 定义红、绿、蓝三个矩形组件（方法见本系列上一篇文章：Qt编程进阶（44）：QML自定义元素（组件）），代码分别如下:

/*红色矩形，源文件RedRectangle.qml */
import QtQuick 2.0
Rectangle {
  width: 64 //宽度
  height: 32 //高度
  color: "red" //颜色
  border.color: Qt.lighter(color)//边框色设置比填充色浅（默认是50%)
}
/* 蓝色矩形，源文件 BlueRectangle.qml */
import QtQuick 2.0
  Rectangle {
  width: 80
  height: 50
  color: "blue"
  border.color: Qt.lighter(color)
}
/* 绿色矩形，源文件 GreenRectangle.qml */
import QtQuick 2.0
  Rectangle {
  width: 48
  height: 62
  color: "green"
  border.color: Qt.lighter(color)
}

(3)打开“main.qml文件，编写代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 420
  height: 280
  visible: true
  title: qsTr("Positioner")
  Rectangle {
  width: 420
  height: 280
  anchors.fill: parent
  Row { //(a)
    x: 25
    y: 25
    spacing: 10 //元素间距为10像素
    layoutDirection:Qt.RightToLeft //元素从右向左排列
    //以下添加被Row定位的元素成员
    RedRectangle { }
    GreenRectangle { }
    BlueRectangle { }
  }
  Column { // (b)
    x: 25
    y: 120
    spacing: 2
    //以下添加被Column定位的元素成员 RedRectangle { }
    GreenRectangle { }
    BlueRectangle { }
  }
  Grid { // (c)
    x:140
    y:120
    columns: 3 //每行3个元素
    spacing: 5
    //以下添加被Grid定位的元素成员
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    }
  }
}

其中，

(a) Row{…}：Row将被其定位的元素成员都放置在一行的位置，所有元素之间的间距相等(由spacing属性设置），顶端保持对齐。layoutDirection属性设置元素的排列顺序，可取值为Qt.LeftToRight (默认，从左向右）、Qt.RightToLeft (从右向左）。
(b) Column {…}: Column将元素成员按照加入的顺序从上到下在同一列排列出来，同样由spacing属性指定元素间距，所有元素靠左对齐。
(c) Grid{…}: Grid将其元素成员排列为一个网格，默认从左向右排列，每行4个元素。可通过设置rows和columns属性来自定义行和列的数值，如果二者有一个不显式设置，则另一个会根据元素成员的总数计算出来。例如，本例中的columns设置为3, 一共放入5个蓝色矩形，行数就会自动计算为2。

2.流定位（Flow)

流定位使用Flow元素，运行效果如图所示。

具体实现步骤如下。

(1) 仍然使用上例的项目“Positioner”，在其基础上修改。

(2) 打开“main.qml”文件，修改代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 150
  height: 200
  visible: true
  title: qsTr("Positioner")
  Rectangle {
    width: 150 //(a)
    height: 200 //(a)
    anchors.fill: parent
    Flow { //(b)
      anchors.fill: parent
      anchors.margins: 15 //元素与窗口左上角边距为15像素
      spacing: 5
      //以下添加被Flow定位的元素成员
      RedRectangle { }
      BlueRectangle { }
      GreenRectangle { }
    }
  }
}

其中，

(a) width: 150; height: 200:为了令Flow正确工作并演示出其实用效果，需要指定元素显示区的宽度和高度。
(b) Flow {…}：顾名思义，Flow会将其元素成员以流的形式显示出来，它既可以从左向右横向布局，也可以从上向下纵向布局，或反之。但与Row、Column等定位器不同的是，添加到Flow里的元素，会根据显示区（窗体）尺寸变化动态地调整其布局。以本程序为例，初始运行时，因窗体狭窄，无法横向编排元素，故三个矩形都纵向排列，在用鼠标将窗体拉宽的过程中，其中矩形由纵排逐渐转变成横排显示。

3.重复器（Repeater)

重复器用于创建大量相似的元素成员，常与其他定位器结合起来使用。

Repeater结合Grid来排列一组矩形元素，运行效果如图所示。

具体实现步骤如下。

(1) 新建QML应用程序，项目名称为“Repeater”。

(2) 打开“main.qml”文件，编写代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 300
  height: 250
  visible: true
  title: qsTr("Repeater")
  Rectangle {
    width: 360
    height: 360
    anchors.fill: parent
    Grid {//Grid定位器
      x : 25; y: 25
      spacing: 4
      //用重复器为Grid添加元素成员
      Repeater { // (a)
        model: 16 //要创建元素成员的个数
        Rectangle {//成员皆为矩形元素
          width: 48; height: 48
          color:"aqua"
          Text {//显示矩形编号
            anchors.centerIn: parent
            color: "black"
            font.pointSize: 20
            text: index// (b)
          }
        }
      }
    }
  }
}

其中，

(a) Repeater {…}:重复器，作为Grid的数据提供者，它可以创建任何QML基本的可视元素。因Repeater会按照其model属性定义的个数循环生成子元素，故上面代码重复生成16个Rectangle。
(b) text: index: Repeater会为每个子元素注入一个index属性，作为当前的循环索引（本例中是0~15)。因可以在子元素定义中直接使用这个属性，故这里用它给Text的text属性赋值。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！

Qt编程进阶（45）：QML元素布局定位器

1.行列、网格定位

2.流定位（Flow)

3.重复器（Repeater)