開篇

在QML中設計應用軟件界面的時候，提供了很多工具（詳見《Qt Quick開發工具大雜燴》）來布局一個界面中的組成元素，幾乎都是“所見即所得”。我們知道Item類型是Qt Quick中所有可視元素的基本類型，如下文檔：

所以在對可視QML類型布局時，我們實際操作的是Item或者是其派生類型。實際使用中，有四種方法可以來布局：

（1）手動定位

（2）anchor

（3）定位器

（4）Layout布局類型

手動進行定位

通過設置Item的x，y屬性，可將Item放置在特定的x,y坐標上。這種方法會根據視覺坐標系統規則設置Item相對于其父節點左上角的位置。

在實際使用中，該方法結合屬性綁定（不指定屬性為常量值），通過將x和y坐標設置為合適的屬性綁定，可以實現相對定位。

在Qt Creator設計模式下，我們可以在右上角處：

設置x、y、width和height定位屬性。

使用anchor定位

Item類型提供anchor到其他Item類型的功能。每個Item有7條錨線：左、右、垂直中心、頂部、底部、基線和水平中心。三條垂直錨線可以錨定到另一物品的三條垂直錨線中的任意一條上，四條水平錨線可以錨定到另一Item的水平錨線上。

在Qt Design Studio中可以在每個Item的Poperties一欄設置anchor，如下圖所示：

使用定位器定位

定位器是一個管理聲明式用戶界面中項位置的容器項。定位器的行為與標準Qt小部件中使用的布局管理器差不多是一樣。

QML中提供的定位器有以下幾種：

在QML中，定位器是以QML類型組件的方式提供的。在QtCreator的設計模式下，默認是添加了該組件，我們可以在其左下角點擊拖動使用：

使用Layout布局類型定位

Layout類型的功能與定位器類似，但是布局類型允許進一步細化或限制布局。布局類型有以下特點：

（1）可以設置文本和其他項的對齊方式。

（2）會自動調整分配的應用程序區域的大小和進行自動填充。

（3）可以設置大小約束（如最小或最大尺寸）。

（4）可以設置布局中項目之間的間距。

注意：Qt Quick Layout是在Qt 5.1中引入的，需要Qt Quick 2.1或以上版本的支持。

Layout類型有以下幾種：

?

?

在 Qt Design Studio中QML Types一欄可以找到支持的Layout類型：

尾

在QML應用開發中，我們幾乎都是使用QtCreator的設計模式或者Qt Design Studio來對應用軟件界面的組成元素進行布局。直接使用開發工具提供的圖形界面接口操作qml文檔即可，不用手動去編寫和修改代碼，這一點非常方便，效率也非常高。

本文所述的四種QML可視元素布局方法，在實際開發中，都會使用到，更多時候是幾種組合在一起去完成一個應用界面的布局，也有單獨使用的情況。

編輯：黃飛

?