作者介紹
豆子(DevBean)，生于山東，定居南京。畢業于山東大學軟體工程專業。Java系的Qt愛好者！
部落格位址：
https://www.devbean.net/2014/02/qt-study-road-2-qml-layout/
正文
上一章我們介紹了 QML 中用于定位的幾種元素，被稱為定位器。除了定位器，QML 還提供了另外一種用于布局的機制。我們将這種機制成為錨點(anchor)。錨點允許我們靈活地設定兩個元素的相對位置。它使兩個元素之間形成一種類似于錨的關系，也就是兩個元素之間形成一個固定點。錨點的行為類似于一種連結，它要比單純地計算坐标改變更強。由于錨點描述的是相對位置，是以在使用錨點時，我們必須指定兩個元素，聲明其中一個元素相對于另外一個元素。錨點是Item元素的基本屬性之一，因而适用于所有 QML 可視元素。
一個元素有 6 個主要的錨點的定位線，如下圖所示：
這 6 個定位線分别是：top、bottom、left、right、horizontalCenter和verticalCenter。對于Text元素，還有一個baseline錨點。每一個錨點定位線都可以結合一個偏移的數值。其中，top、bottom、left和right稱為外邊框；horizontalCenter、verticalCenter和baseline稱為偏移量。
下面，我們使用例子來說明這些錨點的使用。首先，我們需要重新定義一下上一章使用過的BlueRectangle元件：
簡單來說，我們在BlueRectangle最後增加了一個MouseArea元件。前面的章節中，我們簡單使用了這個元件。顧名思義，這是一個用于處理滑鼠事件的元件。之前我們使用了它處理滑鼠點選事件。這裡，我們使用了其拖動事件。anchors.fill: parent一行的含義馬上就會解釋；drag.target: parent則說明拖動目标是parent。我們的拖動對象是MouseArea的父元件，也就是BlueRectangle元件。
接下來看第一個例子：
anchors.fill
代碼如下：
在這個例子中，我們使用anchors.fill設定内部藍色矩形的錨點為填充(fill)，填充的目的對象是parent；填充邊距是 8px。注意，盡管我們設定了藍色矩形寬度為 12px，但是因為錨點的優先級要高于寬度屬性設定，是以藍色矩形的實際寬度是 100px – 8px – 8px = 84px。
第二個例子：
anchors.left
代碼如下：
這次，我們使用anchors.left設定内部藍色矩形的錨點為父元件的左邊線(parent.left)；左邊距是 8px。另外，我們可以試着拖動藍色矩形，看它的移動方式。在我們拖動時，藍色矩形隻能沿着距離父元件左邊 8px 的位置上下移動，這是由于我們設定了錨點的緣故。正如我們前面提到過的，錨點要比單純地計算坐标改變的效果更強，更優先。
第三個例子：
anchors.left parent.right
代碼如下：
這裡，我們修改代碼為anchors.left: parent.right，也就是将元件錨點的左邊線設定為父元件的右邊線。效果即如上圖所示。當我們拖動元件時，依然隻能上下移動。
下一個例子：
anchors.horizontalCenter
代碼如下：
這算是一個稍微複雜的例子。這裡有兩個藍色矩形：blue1和blue2。blue1的錨點水準中心線設定為父元件的水準中心；blue2的錨點上邊線相對于blue1的底部，其中邊距為 4px，另外，我們還增加了一個水準中線為blue1的水準中線。這樣，blue1相對于父元件，blue2相對于blue1，這樣便決定了三者之間的相對關系。當我們拖動藍色矩形時可以發現，blue1和blue2的相對位置始終不變，因為我們已經明确指定了這種相對位置，而二者可以像一個整體似的同時上下移動(因為我們沒有指定其中任何一個的上下邊距與父元件的關系)。
另外一個例子：
anchors.centerIn
代碼如下所示：
與第一個例子類似，我們使用的是anchors.centerIn: parent将藍色矩形的中心固定在父元件的中心。由于我們已經指明是中心，是以也不能拖動這個藍色矩形。
最後一個例子：
anchors.horizontalCenter verticalCenter
代碼如下：
上一個例子中，anchors.centerIn: parent可以看作等價于anchors.horizontalCenter: parent.horizontalCenter和anchors.verticalCenter: parent.verticalCenter。而這裡，我們設定了anchors.horizontalCenterOffset為 -12，也就是向左偏移 12px。當然，我們也可以在anchors.centerIn: parent的基礎上增加anchors.horizontalCenterOffset的值，二者是等價的。由于我們在這裡指定的相對位置已經很明确，拖動也是無效的。
至此，我們簡單介紹了 QML 中定位器和錨點的概念。看起來這些元素和機制都很簡單，但是，通過有機地結合，足以靈活應對更複雜的場景。我們所要做的就是不斷熟悉、深化對這些定位布局技術的了解。
相關文章
第8篇 Qt Quick入門教程之基礎(八)定位布局
Qt 學習之路 2：定位器