開篇

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

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

（1）手動定位

（2）anchor

（3）定位器

（4）Layout布局類型

手動進(jìn)行定位

通過設(shè)置Item的x，y屬性，可將Item放置在特定的x,y坐標(biāo)上。這種方法會根據(jù)視覺坐標(biāo)系統(tǒng)規(guī)則設(shè)置Item相對于其父節(jié)點(diǎn)左上角的位置。

在實(shí)際使用中，該方法結(jié)合屬性綁定（不指定屬性為常量值），通過將x和y坐標(biāo)設(shè)置為合適的屬性綁定，可以實(shí)現(xiàn)相對定位。

在Qt Creator設(shè)計(jì)模式下，我們可以在右上角處：

設(shè)置x、y、width和height定位屬性。

使用anchor定位

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

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

使用定位器定位

定位器是一個(gè)管理聲明式用戶界面中項(xiàng)位置的容器項(xiàng)。定位器的行為與標(biāo)準(zhǔn)Qt小部件中使用的布局管理器差不多是一樣。

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

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

使用Layout布局類型定位

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

（1）可以設(shè)置文本和其他項(xiàng)的對齊方式。

（2）會自動調(diào)整分配的應(yīng)用程序區(qū)域的大小和進(jìn)行自動填充。

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

（4）可以設(shè)置布局中項(xiàng)目之間的間距。

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

Layout類型有以下幾種：

?

?

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

尾

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

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

編輯：黃飛

?