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