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)