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