QML使用anchors（锚）对元素进行布局。anchoring（锚定）是基础元素对象的基本属性，可以被所有的可视化QML元素使用。一个anchors（锚）就像一个协议，并且比几何变化更加强大。Anchors（锚）是相对关系的表达式，你通常需要与其它元素搭配使用。
anchors.png
一个元素有6条锚定线（top顶，bottom底，left左，right右，horizontalCenter水平中，verticalCenter垂直中）。在文本元素（Text Element）中有一条文本的锚定基线（baseline）。每一条锚定线都有一个偏移（offset）值，在top（顶），bottom（底），left（左），right（右）的锚定线中它们也被称作边距。对于horizontalCenter（水平中）与verticalCenter（垂直中）与baseline（文本基线）中被称作偏移值。

51Q}L(`DJ`W)0K5UR`_$FCG.png

1. 组件

  1. // Color.qml
  2. import QtQuick 2.15
  4. Rectangle {
  5.     width: 100
  6.     height: 100
  7.     border.color: Qt.lighter(color)
  8. }

2. 布局

2.1 元素填充它的父元素

  1. // 元素填充它的父元素
  2. Color {
  3.     color: "#ff0066"
  4.     Color {
  5.         width: 50
  6.         anchors.fill: parent
  7.         anchors.margins: 8
  8.         color: "#ccff66"
  9.         Text {
  10.             anchors.centerIn: parent
  11.             text: qsTr("(1)")
  12.         }
  13.     }
  14. }

2.2 元素左对齐它的父元素

  1. Color {
  2.     color: "#ff0066"
  3.     Color {
  4.         width: 50; height: 50
  5.         anchors.left: parent.left
  6.         color: "#ccff66"
  7.         Text {
  8.             anchors.centerIn: parent
  9.             text: qsTr("(2)")
  10.         }
  11.     }
  12. }

2.3 元素的左边与它父元素的右边对齐

  1. // 元素的左边与它父元素的右边对齐
  2. Color {
  3.     color: "#ff0066"
  4.     Color {
  5.         width: 50; height: 50
  6.         anchors.left: parent.right
  7.         color: "#ccff66"
  8.         Text {
  9.             anchors.centerIn: parent
  10.             text: qsTr("(3)")
  11.         }
  12.     }
  13. }

2.4 元素中间对齐。

Blue1与它的父元素水平中间对齐。Blue2与Blue1中间对齐，并且它的顶部对齐Blue1的底部。

  1. // 元素中间对齐
  2. Color {
  3.     color: "#ff0066"
  4.     Color {
  5.         id: b11
  6.         width: 30; height: 30
  7.         y: 8
  8.         color: "#ccff66"
  9.         anchors.horizontalCenter: parent.horizontalCenter
  10.     }
  11.     Color {
  12.         id: b12
  13.         y:40
  14.         width: 50; height: 30
  15.         color: "#ccff66"
  16.         anchors.topMargin: 4
  17.         anchors.horizontalCenter: b11.horizontalCenter
  18.         Text {
  19.             anchors.centerIn: parent
  20.             text: qsTr("(4)")
  21.         }
  22.     }
  23. }

2.5 元素在它的父元素中居中

  1. // 元素在它的父元素中居中
  2. Color {
  3.     color: "#ff0066"
  4.     Color {
  5.         width: 50; height: 50
  6.         anchors.centerIn: parent
  7.         color: "#ccff66"
  8.         Text {
  9.             anchors.centerIn: parent
  10.             text: qsTr("(5)")
  11.         }
  12.     }
  13. }

2.6 元素水平居中且设置偏移

元素水平方向居中对齐父元素并向后偏移12像素，垂直方向居中对齐。

  1. // 元素水平方向居中对齐父元素并向后偏移12像素，垂直方向居中对齐
  2. Color {
  3.     color: "#ff0066"
  4.     Color {
  5.         width: 50; height: 50
  6.         anchors.horizontalCenter: parent.horizontalCenter
  7.         anchors.horizontalCenterOffset: -12
  8.         anchors.verticalCenter: parent.verticalCenter
  9.         color: "#ccff66"
  10.         Text {
  11.             anchors.centerIn: parent
  12.             text: qsTr("(6)")
  13.         }
  14.     }
  15. }

3. 完整代码

transformation.qml

  1. import QtQuick 2.15
  2. import QtQuick.Window 2.15
  5. Rectangle {
  6.     id: root
  7.     width: 480
  8.     height: 300
  10.     Grid {
  11.         x: 30;y:30
  12.         spacing: 30
  13.         columns: 3
  14.         // 元素填充它的父元素
  15.         Color {
  16.             color: "#ff0066"
  17.             Color {
  18.                 width: 50
  19.                 anchors.fill: parent
  20.                 anchors.margins: 8
  21.                 color: "#ccff66"
  22.                 Text {
  23.                     anchors.centerIn: parent
  24.                     text: qsTr("(1)")
  25.                 }
  26.             }
  27.         }
  29.         // 元素左对齐它的父元素
  30.         Color {
  31.             color: "#ff0066"
  32.             Color {
  33.                 width: 50; height: 50
  34.                 anchors.left: parent.left
  35.                 color: "#ccff66"
  36.                 Text {
  37.                     anchors.centerIn: parent
  38.                     text: qsTr("(2)")
  39.                 }
  40.             }
  41.         }
  43.         // 元素的左边与它父元素的右边对齐
  44.         Color {
  45.             color: "#ff0066"
  46.             Color {
  47.                 width: 50; height: 50
  48.                 anchors.left: parent.right
  49.                 color: "#ccff66"
  50.                 Text {
  51.                     anchors.centerIn: parent
  52.                     text: qsTr("(3)")
  53.                 }
  54.             }
  55.         }
  57.         // 元素中间对齐
  58.         Color {
  59.             color: "#ff0066"
  60.             Color {
  61.                 id: b11
  62.                 width: 30; height: 30
  63.                 y: 8
  64.                 color: "#ccff66"
  65.                 anchors.horizontalCenter: parent.horizontalCenter
  66.             }
  67.             Color {
  68.                 id: b12
  69.                 y:40
  70.                 width: 50; height: 30
  71.                 color: "#ccff66"
  72.                 anchors.topMargin: 4
  73.                 anchors.horizontalCenter: b11.horizontalCenter
  74.                 Text {
  75.                     anchors.centerIn: parent
  76.                     text: qsTr("(4)")
  77.                 }
  78.             }
  79.         }
  81.         // 元素在它的父元素中居中
  82.         Color {
  83.             color: "#ff0066"
  84.             Color {
  85.                 width: 50; height: 50
  86.                 anchors.centerIn: parent
  87.                 color: "#ccff66"
  88.                 Text {
  89.                     anchors.centerIn: parent
  90.                     text: qsTr("(5)")
  91.                 }
  92.             }
  93.         }
  95.         // 元素水平方向居中对齐父元素并向后偏移12像素，垂直方向居中对齐
  96.         Color {
  97.             color: "#ff0066"
  98.             Color {
  99.                 width: 50; height: 50
  100.                 anchors.horizontalCenter: parent.horizontalCenter
  101.                 anchors.horizontalCenterOffset: -12
  102.                 anchors.verticalCenter: parent.verticalCenter
  103.                 color: "#ccff66"
  104.                 Text {
  105.                     anchors.centerIn: parent
  106.                     text: qsTr("(6)")
  107.                 }
  108.             }
  109.         }
  110.     }
  111. }