淺析Qt Quick Designer
在對(duì)Qt Quick和QML有了一些了解后，現(xiàn)在我們來熟悉一下這個(gè)全新的Qt Quick Designer界面。
在這一篇中我們會(huì)用一個(gè)例子來介紹一下Qt Quick Designer界面，但是不會(huì)對(duì)代碼進(jìn)行過多的講解。到下一篇我們講解QML組件時(shí)會(huì)對(duì)這個(gè)程序生成的代碼進(jìn)行逐行講解，再往后的幾篇，我們就會(huì)對(duì)Qt Quick中的幾個(gè)特色功能進(jìn)行舉例講解，而在講解例子的同時(shí)，我們也會(huì)將QML語(yǔ)言的講述加入其中。我們會(huì)在完成幾個(gè)實(shí)例的同時(shí)掌握QML語(yǔ)言。
我們新建一個(gè)Qt QML Application，我這里的工程名為“helloWorld”。
一，熟悉Qt Quick Designer界面
這是整個(gè)Qt Quick Designer界面，它由幾個(gè)面板組成，下面分別進(jìn)行介紹。
主設(shè)計(jì)面板，也就是我們下面所說的場(chǎng)景。這是我們的主設(shè)計(jì)區(qū)，所有的項(xiàng)目都要放到這里，當(dāng)程序執(zhí)行時(shí)，就是顯示的這個(gè)面板上的內(nèi)容。
Navigator導(dǎo)航器面板。場(chǎng)景中所有的項(xiàng)目都在這里列出。在這里，我們可以選中一個(gè)特定的項(xiàng)目，那么場(chǎng)景中對(duì)應(yīng)的項(xiàng)目也會(huì)被選中，我們也可以在這里拖拽項(xiàng)目來更改它們的從屬關(guān)系，或者點(diǎn)擊項(xiàng)目后面的“眼睛”圖標(biāo)來設(shè)置它是否可以顯示。
Properties屬性面板。在這里我們可以設(shè)置項(xiàng)目的屬性。比如項(xiàng)目名稱，填充顏色，邊框顏色，項(xiàng)目大小和位置，以及項(xiàng)目的縮放，旋轉(zhuǎn)和不透明度等。
Library庫(kù)面板。在這里提供了一些常用的部件，我們可以將它們拖放到場(chǎng)景中來使用。在Resources子面板中，我們可以看到我們工程文件夾下的圖片等資源，我們也可以將它們拖拽到場(chǎng)景中直接使用。當(dāng)我們以后新建了組件后，它也會(huì)出現(xiàn)在Library中。
狀態(tài)面板。這里可以為場(chǎng)景新建或刪除一個(gè)狀態(tài)。
設(shè)計(jì)模式和代碼編輯模式的轉(zhuǎn)換，我們可以點(diǎn)擊“Edit”圖標(biāo)進(jìn)入代碼編輯界面。
#p#
二，簡(jiǎn)單的使用。
1.我們從庫(kù)面板中拖入一個(gè)Rectangle到場(chǎng)景中，調(diào)整它的大小。然后在屬性面板中更改其ID為“myButton”，并更改其顏色。將其Radius屬性更改為10，這時(shí)它就會(huì)變?yōu)閳A角了。這時(shí)的屬性面板如下。
2.然后我們從庫(kù)面板中拖入一個(gè)Mouse Area部件到“myButton”上，注意，要使得Mouse Area部件成為“myButton”的子項(xiàng)目，在導(dǎo)航器面板中可以看到它們的關(guān)系。
這時(shí)我們選中了這個(gè)Mouse Area部件，在屬性面板中將其id改為“myMouseArea”，然后在Geometry子面板中點(diǎn)擊
圖標(biāo)，鼠標(biāo)區(qū)域填充整個(gè)“myButton”。
3.這時(shí)我們?cè)跔顟B(tài)面板中點(diǎn)擊一下后面的帶有加號(hào)的方塊，新建一個(gè)狀態(tài)。如下圖。
我們?cè)赟tate1狀態(tài)下，更改場(chǎng)景中的“Hello World”，改變它的字體大小，并更改顏色。如下圖。
然后我們進(jìn)入Advanced子面板，更改一下Opacity（不透明度）和Rotation（旋轉(zhuǎn)）的值。如下圖。
4.我們下面點(diǎn)擊“Edit”圖標(biāo)，進(jìn)入代碼編輯界面。
在這里我們找到state代碼段，添加一行代碼when: myMouseArea.pressed ，如下：
- states: [
- State {
- name: “State1″
- when: myMouseArea.pressed
這里我們省略了其他代碼。
5.此時(shí)我們運(yùn)行程序，效果如下。
然后我們點(diǎn)擊按鈕，效果如下：
這樣這個(gè)簡(jiǎn)單的例子就講完了。我們可以注意到，當(dāng)我們?cè)谠O(shè)計(jì)器中更改界面時(shí)，編輯器中的代碼就自動(dòng)改變了。其實(shí)，如果我們?cè)诰庉嬈髦懈牧舜a，對(duì)應(yīng)的設(shè)計(jì)器中的界面也會(huì)相應(yīng)改變的。這樣就實(shí)現(xiàn)了真正的所見即所得。
【編輯推薦】
Qt SDK 1.1 beta和Qt Quick發(fā)布 附下載
