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并將其與示例文件進行對比。用戶界面現已準備好，您可以切換到編輯模式來編輯main.qml文件，將動畫添加到應用程序中。

購買Qt Enterprise最新正版授權！詳情請""

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>