Qt使用教程之建立Qt Quick應用程序（二）

<Qt Enterprise最新版下載>

建立主視圖

應用程序的主視圖在屏幕的左上角和兩個空的矩形框中顯示Qt logo。想要在您的應用程序中使用qt-logo.png圖像，您就必須將其從Qt示例目錄複製到項目目錄中（由於與QML文件的子目錄相同），該圖像會出如今Resources中。您也能夠使用其餘圖像或一個QML類型來代替。

1. 在Projects視圖中，雙擊MainForm.ui.qml文件在Qt Quick Designer中打開它。

2. 在Navigator中選擇RowLayout並點擊Delete來刪除它。

3. 在Library > Resources中，選擇qt-logo.png並將其拖動到導航器的項目中。

1. 在Id字段中輸入icon。

2. 在Position字段中將X設置爲10，Y設置爲20。

4. 在Projects視圖中右鍵單擊資源文件：qml.qrc，而後選擇Add Existing File來爲部署添加qt-logo.png到資源文件中。

5. 在導航器中拖放一個Rectangle到頁面中，並編輯其屬性。

1. 在Id字段中輸入opLeftRect。

2. 在Size字段中，將W設置爲46，H設置爲55，使矩形的大小與圖像的尺寸匹配。

3. 在Color字段中，點擊Transparent按鈕使矩形透明。

4. 在Border color字段中，將邊框顏色設置爲#808080。

5. 在Border color字段中，選擇6來建立圓角矩形。

6. 點擊Layout，而後點擊左上角的anchor按鈕將矩形錨定在頁面的左上角。

7. 在Margin字段中，選擇頂部錨定爲20，左邊錨定爲10。

6. 在導航器中，從Library中拖動一個Mouse Area類型到topLeftRect中。

7. 點擊Layout，而後單擊Fill to Parent按鈕來錨定鼠標區域的矩形。

8. 在導航器中。複製topLeftRect（按Ctrl+C）並將其兩次粘貼到導航器的頁面中（按Ctrl+ V）。Qt Creator從新命名topLeftRect1和topLeftRect2類型的新實例。

9. 選擇topLeftRect1並編輯它的屬性：

1. 在Id字段輸入middleRightRect。

2. 在Layout中選擇垂直中心錨定按鈕和右錨定按鈕，來固定矩形到屏幕中間的右邊距。

3. 在Margin字段中，設置右錨定爲10，設置垂直中心錨定爲0。

10. 選擇topLeftRect2並編輯它的屬性：

1. 在Id字段輸入bottomLeftRect 。

2. 在Layout中選擇底部和左錨定按鈕，將矩形固定到屏幕左下角。

3. 在Margin字段中，設置底部錨定爲20，設置左錨定爲0。

11. 在導航器中，爲每種類型選擇Export按鈕來導出全部類型做爲屬性，這使您能夠在main.qml文件中使用屬性。

12. 按Ctrl+S來保存更改。

想要檢查您的代碼，您能夠在編輯模式下打開MainForm.ui.qml並將其與MainForm.ui.qml示例文件進行對比。用戶界面現已準備好，您能夠切換到編輯模式來編輯main.qml文件，將動畫添加到應用程序中。

有興趣的朋友能夠點擊查看更多有關Qt的文章！