QML是Qt推出的Qt Quick技術的一部分，它可以快速便捷實現流暢的UI。最近工作項目中採用了QML來開發觸控螢幕，由於第一次接觸使用QML, 難免遇到各種各樣的問題，特別是界面的布局，所以，本文結合工作中探索的經驗，重新梳理總結了QML的錨點布局anchor。
本文將會從以下四個方面來講解錨點布局，分別是錨線、邊距、偏移以及便捷用法。首先給出下面的結構圖，一方面可以讓大家在總體上對錨點布局的內容有一個框架，另一方面也方便後續知識的回顧梳理。先安靜下來，花幾分鐘熟悉下總體知識結構，然後再往下閱讀，閱讀完成之後，再回來看看是否知識結構更加清晰明了。
一、布局簡介
錨點布局anchor, 對於第一次接觸QML的新手來說，可能稍微比較難理解，這裡可以這麼理解， 錨是船停泊時所用的器具，用來固定船隻。對於界面布局來說，就是用來固定部件的位置。
二、位置布局
一個部件有七個錨線(anchor lines), 分別是left、right、top、bottom、horizontalCenter、verticalCenter和baseline。這裡的anchor lines都是不可見的。
下圖所示，藍色區域代表一個部件，用虛線來代表錨線，left代表部件的左錨線、right代表部件的右錨線、top代表部件的頂部錨線、bottom代表部件的底部錨線、horizontalCenter代表部件的水平居中錨線、vertialCenter代表部件的垂直居中錨線。
至於baseline錨線，這裡沒有搞明白他的具體效果，所以沒有畫出。QT的官方文檔說是baseline是標示文本的虛線，對於沒有文本的部件，功能等同於top。但是實際操作的時候，沒有看出區別。所以，對於沒有理清的知識點，就不多說了，免得誤人子弟。
下面我們來看一個位置布局的例子。這裡設置整個窗口背景為黑色。例子中代碼我們只需要關注rect1和rect2的最後一行。比如rect1最後一行為anchors.left: parent.left，表示rect1左側的錨線在父級的左側錨線。rect2最後一行為anchors.left: rect1.right，表示rect2左側錨線在rect1的右側錨線。這裡需要注意部件在rect1和rect2是在直接父級的內部，而rect1和rect2是屬於同級級別。所以，錨點的設置稍微有點區別。這裡可以細細體會一下。
運行顯示的效果如下圖所示，rect1在窗口左上角，rect2顯示在rect1的右側。
anchor也提供簡易設置位置的方式，如centerIn, 表示位置為目標對象的中心，相當於同時設置了horizontalCenter和verticalCenter。比如上面例子中文本的設置anchors.centerIn: parent，表示將文本信息位置設置為父級的中心。
注意，我們採用anchor進行布局的時候，如果單單設置一個屬性是沒有辦法確定其位置，這可能導致部件沒有辦法顯示出來。比如如果rect1沒有設置height, 那麼rect1就不會顯示。如果不想要顯示設置rect1的高度，那麼除了設置rect1左側的錨線，還需要設置它的頂部和底部的錨線。
三、邊距
anchor還提供了控制項的邊距設置，基本元素分別為leftMargin、rightMargin、topMargin、bottomMargin。如下圖所示，橙色背景的方塊代表一個部件，則它的四周順時針分別表示為左側邊距、頂部邊距、右側邊距、底部邊距。
上一個例子的基礎上在rect2中增加邊距 anchors.leftMargin:50
運行效果如下所示，rect2左側增加了邊距。
anchors也提供簡易設置部件邊距的方法，如margins, 它的功能相當於將部件的左右上下邊距都設置為相同的值。
四、偏移
anchor可以設置部件的偏移，分別為horizontalCenterOffset, verticalCenterOffset 和baselineOffset，表示水平中心的偏移、垂直中心的偏移、基線的偏移。
添加部件rect3, 設置顯示在窗體中心，但是偏向右下角50個像素
運行效果如下圖所示， 左側窗口是沒有設置偏移的效果，右側窗口是設置了偏移的效果。
五、局限
anchor布局也有局限性，出於性能考慮，部件只能設置錨點為同級或者直接父級。
六、總結
本文已經將錨點布局涉及的錨線、邊距、偏移，結合例子進行詳細的講解說明。對於複雜的布局，如果採用錨點布局，那麼都是上面基本元素組合而成的。