上一章我們介紹了 QML 中用于定位的幾種元素，被稱為定位器。除了定位器，QML 還提供了另外一種用于布局的機制。我們將這種機制成為錨點（anchor）。錨點允許我們靈活地設置兩個元素的相對位置。它使兩個元素之間形成一種類似于錨的關系，也就是兩個元素之間形成一個固定點。錨點的行為類似于一種鏈接，它要比單純地計算坐標改變更強。由于錨點描述的是相對位置，所以在使用錨點時，我們必須指定兩個元素，聲明其中一個元素相對于另外一個元素。錨點是Item元素的基本屬性之一，因而適用于所有 QML 可視元素。

一個元素有 6 個主要的錨點的定位線，如下圖所示： QML 錨點 這 6 個定位線分別是：top、bottom、left、right、horizontalCenter和verticalCenter。對于Text元素，還有一個baseline錨點。每一個錨點定位線都可以結合一個偏移的數值。其中，top、bottom、left和right稱為外邊框；horizontalCenter、verticalCenter和baseline稱為偏移量。

下面，我們使用例子來說明這些錨點的使用。首先，我們需要重新定義一下上一章使用過的BlueRectangle組件： BlueRectangle import QtQuick 2.0

Rectangle { width: 48 height: 48 color: “blue” border.color: Qt.lighter(color)

} 1 2 3 4 5 6 7 8 9 10 11 12 13

import QtQuick 2.0

Rectangle { width: 48 height: 48 color: “blue” border.color: Qt.lighter(color)

}

簡單來說，我們在BlueRectangle最后增加了一個MouseArea組件。前面的章節中，我們簡單使用了這個組件。顧名思義，這是一個用于處理鼠標事件的組件。之前我們使用了它處理鼠標點擊事件。這里，我們使用了其拖動事件。anchors.fill: parent一行的含義馬上就會解釋；drag.target: parent則說明拖動目標是parent。我們的拖動對象是MouseArea的父組件，也就是BlueRectangle組件。

接下來看第一個例子：

QML anchors.fill

代碼如下： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

在這個例子中，我們使用anchors.fill設置內部藍色矩形的錨點為填充（fill），填充的目的對象是parent；填充邊距是 8px。注意，盡管我們設置了藍色矩形寬度為 12px，但是因為錨點的優先級要高于寬度屬性設置，所以藍色矩形的實際寬度是 100px – 8px – 8px = 84px。

第二個例子：

QML anchors.left

代碼如下： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

這次，我們使用anchors.left設置內部藍色矩形的錨點為父組件的左邊線（parent.left）；左邊距是 8px。另外，我們可以試著拖動藍色矩形，看它的移動方式。在我們拖動時，藍色矩形只能沿著距離父組件左邊 8px 的位置上下移動，這是由于我們設置了錨點的緣故。正如我們前面提到過的，錨點要比單純地計算坐標改變的效果更強，更優先。

第三個例子： QML anchors.left parent.right 代碼如下： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

這里，我們修改代碼為anchors.left: parent.right，也就是將組件錨點的左邊線設置為父組件的右邊線。效果即如上圖所示。當我們拖動組件時，依然只能上下移動。

下一個例子： QML anchors.horizontalCenter

代碼如下： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

這算是一個稍微復雜的例子。這里有兩個藍色矩形：blue1和blue2。blue1的錨點水平中心線設置為父組件的水平中心；blue2的錨點上邊線相對于blue1的底部，其中邊距為 4px，另外，我們還增加了一個水平中線為blue1的水平中線。這樣，blue1相對于父組件，blue2相對于blue1，這樣便決定了三者之間的相對關系。當我們拖動藍色矩形時可以發現，blue1和blue2的相對位置始終不變，因為我們已經明確指定了這種相對位置，而二者可以像一個整體似的同時上下移動（因為我們沒有指定其中任何一個的上下邊距與父組件的關系）。

另外一個例子： QML anchors.centerIn 代碼如下所示： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

與第一個例子類似，我們使用的是anchors.centerIn: parent將藍色矩形的中心固定在父組件的中心。由于我們已經指明是中心，所以也不能拖動這個藍色矩形。

最后一個例子： QML anchors.horizontalCenter verticalCenter

代碼如下： import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import QtQuick 2.0

Rectangle { id: root width: 220 height: 220 color: “black”

}

上一個例子中，anchors.centerIn: parent可以看作等價于anchors.horizontalCenter: parent.horizontalCenter和anchors.verticalCenter: parent.verticalCenter。而這里，我們設置了anchors.horizontalCenterOffset為 -12，也就是向左偏移 12px。當然，我們也可以在anchors.centerIn: parent的基礎上增加anchors.horizontalCenterOffset的值，二者是等價的。由于我們在這里指定的相對位置已經很明確，拖動也是無效的。

至此，我們簡單介紹了 QML 中定位器和錨點的概念。看起來這些元素和機制都很簡單，但是，通過有機地結合，足以靈活應對更復雜的場景。我們所要做的就是不斷熟悉、深化對這些定位布局技術的理解。