基础知识

QML提供了一种灵活的锚定位方式来布局。锚定的概念是Item的基础，并且适用于所有可视化的QML元素。锚的作用像一个契约，比竞争的几何变化更强大。锚是相对表达的，您总是需要一个相关的元素来进行锚定。
image.png
一个元素有 6 条主要的锚线（top, bottom,left, right, horizontalCenter, verticalCenter）。此外，Text 元素中还有用于文本的基线锚点。每条锚线都有一个偏移量。在top, bottom, left, 和right锚点的情况下，它们称为边距。对于horizontalCenter, verticalCenter and baseline，它们被称为偏移量。 :::success 在源码中我们增加了MouseArea。增加的作用是为了让元素正常情况下可以被移动。但是加入锚布局以后，是个什么样子呢，我们一起来看看。 ::: 基础组件的源码：

  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.     property real mouse_x: 0
  11.     property real mouse_y: 0
  12.     Text {
  13.         id: label
  14.         anchors.centerIn: parent
  15.         text:root.showText
  16.     }
  18.     MouseArea{
  19.         anchors.fill: parent
  20.         onPressed: {
  21.             mouse_x = mouseX
  22.             mouse_y = mouseY
  23.         }
  25.         onPositionChanged: {
  26.             root.x = mouseX + root.x - mouse_x
  27.             root.y = mouseY + root.y - mouse_y
  28.         }
  29.     }
  31.     border.color: Qt.lighter(color)
  32. }
  34. //GreenSquare.qml
  35. import QtQuick
  37. Rectangle {
  38.     id:root
  39.     width: 48
  40.     height: 48
  41.     color: "#228B22"
  42.     property string showText: ""
  43.     property real mouse_x: 0
  44.     property real mouse_y: 0
  45.     Text {
  46.         id: label
  47.         anchors.centerIn: parent
  48.         text:root.showText
  49.     }
  51.     MouseArea{
  52.         anchors.fill: parent
  53.         onPressed: {
  54.             mouse_x = mouseX
  55.             mouse_y = mouseY
  56.         }
  58.         onPositionChanged: {
  59.             root.x = mouseX + root.x - mouse_x
  60.             root.y = mouseY + root.y - mouse_y
  61.         }
  62.     }
  64.     border.color: Qt.lighter(color)
  65. }
  67. //BlueSquare.qml
  68. import QtQuick
  70. Rectangle {
  71.     id:root
  73.     width: 48
  74.     height: 48
  75.     color: "#1E90FF"
  77.     property string showText: ""
  78.     property real mouse_x: 0
  79.     property real mouse_y: 0
  81.     Text {
  82.         id: label
  83.         anchors.centerIn: parent
  84.         text:root.showText
  85.     }
  87.     MouseArea{
  88.         anchors.fill: parent
  89.         onPressed: {
  90.             mouse_x = mouseX
  91.             mouse_y = mouseY
  92.         }
  94.         onPositionChanged: {
  95.             root.x = mouseX + root.x - mouse_x
  96.             root.y = mouseY + root.y - mouse_y
  97.         }
  98.     }
  100.     border.color: Qt.lighter(color)
  101. }
  1. 父元素填充子元素 ```ruby import QtQuick

GreenSquare { BlueSquare { width: 12 anchors.fill: parent anchors.margins: 8 showText: ‘(1)’ } }

  1. 结果：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/214918/1636035942775-12e2912b-a406-43e5-a19b-2378d8d15132.png#clientId=ued7be6b1-e87b-4&from=paste&height=207&id=BFbHa&margin=%5Bobject%20Object%5D&name=image.png&originHeight=207&originWidth=238&originalType=binary&ratio=1&size=2535&status=done&style=stroke&taskId=uce54d2b2-1dd3-4ea8-b97e-5e02383868e&width=238)
  3. 2. 元素与父元素左对齐。
  4. ```ruby
  5. // RepeaterExample.qml
  7. import QtQuick
  9. GreenSquare {
  10.     BlueSquare {
  11.         width: 48
  12.         y: 8
  13.         anchors.left: parent.left
  14.         anchors.leftMargin: 8
  15.         showText: "(2)"
  16.     }
  17. }

结果：
image.png

  1. 元素的左侧与父元素的右侧对齐。 ```ruby

import QtQuick Rectangle{ GreenSquare { width: 120 height: 40 BlueSquare { width: 48 anchors.left: parent.right showText: ‘(3)’ } } }

  1. 结果：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/214918/1636036380390-8d3c0fd3-af3f-4329-bb96-159038c1cf71.png#clientId=ued7be6b1-e87b-4&from=paste&height=163&id=ube16512a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=163&originWidth=321&originalType=binary&ratio=1&size=2589&status=done&style=stroke&taskId=u063b5f37-3dc1-4caf-bc12-67d59543cf1&width=321)
  3. 4. 居中对齐元素。`Blue1` 水平居中于父级。`Blue2 `也水平居中，但在 `Blue 1` 上，其顶部与 `Blue1` 底线对齐。
  4. ```ruby
  5. import QtQuick
  6. GreenSquare {
  7.     BlueSquare {
  8.         id: blue1
  9.         width: 48; height: 24
  10.         y: 8
  11.         anchors.horizontalCenter: parent.horizontalCenter
  12.     }
  13.     BlueSquare {
  14.         id: blue2
  15.         width: 72; height: 24
  16.         anchors.top: blue1.bottom
  17.         anchors.topMargin: 4
  18.         anchors.horizontalCenter: blue1.horizontalCenter
  19.         showText:  '(4)'
  20.     }
  21. }

结果：
image.png

  1. 元素以父元素为中心

    1. import QtQuick
    2. GreenSquare {
    3.  BlueSquare {
    4.      width: 48
    5.      anchors.centerIn: parent
    6.      showText: '(5)'
    7.  }
    8. }

    结果：
    image.png

  2. 使用水平和垂直中线，元素以父元素的左偏移居中

    1. import QtQuick
    2. GreenSquare {
    3.  BlueSquare {
    4.      width: 48
    5.      anchors.horizontalCenter: parent.horizontalCenter
    6.      anchors.horizontalCenterOffset: -12
    7.      anchors.verticalCenter: parent.verticalCenter
    8.      showText:  '(6)'
    9.  }
    10. }

    结果：
    image.png

    再加点料

    在子元素中我们增加了MouseArea区域，支持对子元素的拖动。试试这个例子，拖动一些方块。您将看到：

  • (1)不能被拖动，因为它是锚定在所有的方面(尽管您可以拖动(1)的父级，因为它根本没有被锚定)。
  • (2)可以垂直拖动，因为只有左侧被锚定。
  • 这同样适用于(3)。(4)只能垂直拖动，因为两个方块都是水平居中的。
  • (5)以父方为中心，因此不能被拖拽。
  • 这同样适用于(7)。拖动一个元素意味着改变它的x、y位置。

由于锚定比设置x、y属性更强，拖动受到锚定线的限制。我们将在稍后讨论动画时看到这个效果。