關(guān)于可視QML類(lèi)型的四種布局

開(kāi)篇

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

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

（1）手動(dòng)定位

（2）anchor

（3）定位器

（4）Layout布局類(lèi)型

手動(dòng)進(jìn)行定位

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

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

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

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

使用anchor定位

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

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

使用定位器定位

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

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

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

使用Layout布局類(lèi)型定位

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

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

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

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

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

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

Layout類(lèi)型有以下幾種：

?

?

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

尾

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

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

編輯：黃飛

?