創建一個QT快速應用

本教程使用內置的QML類型，介紹了Qt Quick的基本概念。有關可以選擇的用戶界面選項的更多信息，請參閱用戶界面。

本教程描述了如何使用Qt Creator實現Qt Quick狀態和過渡。我們創建一個應用程序，在單擊頁面上的三個矩形時，顯示一個移動的Qt標志。

關于QML：

QML（Qt Meta-Object Language）類型是一種用于構建用戶界面的聲明性語言。它是Qt Quick框架的核心組成部分，用于描述應用程序的外觀和行為。
QML類型是可重用的元素，可以通過組合和嵌套來創建復雜的用戶界面。每個QML類型都有屬性、信號和方法，可以在其他QML類型中使用和操作。
Qt提供了一些內置的QML類型，如Rectangle（矩形）、Text（文本）、Image（圖片）等，這些類型可以直接在QML文件中使用。此外，還可以創建自定義的QML類型，以滿足特定的需求。
使用QML類型，可以通過簡單而直觀的方式構建現代、響應式和動態的用戶界面。它使得開發者能夠更輕松地實現界面的交互和動畫效果。

有關在設計模式下開發Qt Quick應用程序的更多信息，請參閱開發Qt Quick應用程序。

有關使用Qt Quick控件的示例，請參閱Qt Quick控件示例。

創建項目

1. 選擇“文件”>“新建文件或項目”>“應用程序”>“Qt Quick應用程序-滑動”>“選擇”。
2. 在“名稱”字段中輸入應用程序的名稱。
3. 在“創建位置”字段中輸入項目文件的路徑，然后選擇“下一步”（或在macOS上選擇“繼續”）。
4. 在“構建系統”字段中，選擇要用于構建和運行項目的構建系統：qmake、CMake或Qbs。
5. 在“Qt Quick控件樣式”字段中，選擇要使用的預定義UI樣式之一，然后選擇“下一步”。
6. 選擇要為其構建應用程序的平臺的工具集。要構建適用于移動設備的應用程序，請選擇Android ARM和iPhone OS的工具集，然后單擊“下一步”。

注意：如果已在“工具”>“選項”>“工具集”（Windows和Linux）或“Qt
Creator”>“首選項”>“工具集”（macOS）中指定了工具集，則會列出工具集。

7. 選擇“下一步”。
8. 查看項目設置，然后單擊“完成”（或在macOS上單擊“完成”）。

Qt Creator生成兩個UI文件，Page1Form.ui.qml和Page2Form.ui.qml，以及一個QML文件，main.qml。可以在表單編輯器中修改Page1Form.ui.qml以創建應用程序的主視圖，并在文本編輯器中修改main.qml以添加應用程序邏輯。對于本示例，可以忽略Page2Form.ui.qml。

創建主視圖

應用程序的主視圖在視圖的左上角顯示一個Qt標志和兩個空矩形。

要在應用程序中使用qt-logo.png圖像，必須將其從Qt示例目錄復制到項目目錄（與QML文件相同的子目錄）。該圖像將顯示在資源中。也可以使用任何其他圖像或QML類型。

1. 在Projects視圖中，雙擊打開Page1Form.ui.qml文件以在設計模式下編輯。
   

2. 在導航器中，選擇Label并按Delete鍵刪除它。

3. 在導航器中選擇Page，并在Id字段中輸入page。

4. 在Library > Resources中，選擇qt-logo.png并將其拖放到導航器中的頁面上。
   
   a. 在Id字段中輸入icon。
   b. 在Position字段中，將X設置為10，Y設置為20。

5. 在Projects視圖中右鍵單擊資源文件qml.qrc，并選擇Add Existing File將qt-logo.png添加到用于部署的資源文件中。

6. 將一個Rectangle拖放到導航器中的頁面上，并編輯其屬性。
   
   a. 在Id字段中輸入topLeftRect。
   b. 在Size字段中，將W設置為55，H設置為41，使矩形大小與圖像大小相匹配。
   c. 在Color字段中，點擊（透明）按鈕使矩形透明。
   d. 在Border color字段中，將邊框顏色設置為#808080。
   e. 點擊Layout，然后點擊（Top）和（Left）錨定按鈕將矩形錨定到頁面的左上角。
   f. 在Margin字段中，為頂部錨點選擇20，為左側錨點選擇10。
   

7. 從庫中將Mouse Area類型拖放到導航器中的topLeftRect上。

8. 點擊Layout，然后點擊
   （Fill to Parent）按鈕將鼠標區域錨定到矩形上。

9. 在導航器中，通過按Ctrl+C復制topLeftRect，并按Ctrl+V將其粘貼到頁面上兩次。Qt Creator會將新實例命名為topLeftRect1和topLeftRect2。

10. 選擇topLeftRect1并編輯其屬性：
    a. 在Id字段中輸入middleRightRect。
    b. 在Layout中，選擇
    （垂直居中錨定按鈕），然后選擇
    （右側）錨定按鈕將矩形錨定到其父級的中右邊距。
    c. 在Margin字段中，為右側錨點選擇10，為垂直居中錨點選擇0。

11. 選擇topLeftRect2并編輯其屬性：
    a. 在Id字段中輸入bottomLeftRect。
    b. 在Layout中，選擇
    （底部）和
    （左側）錨定按鈕將矩形錨定到其父級的左下邊距。
    c. 在Margin字段中，為底部錨點選擇20，為左側錨點選擇10。

12. 在導航器中，選擇每個類型的
    （導出）按鈕以將所有類型導出為屬性。這使可以在main.qml文件中使用這些屬性。

13. 按Ctrl+S保存更改。

要檢查的代碼，可以在文本編輯器中查看Page1Form.ui.qml文件，并將其與Page1Form.ui.qml示例文件進行比較。

新項目向導向Page1.qml文件添加樣板代碼以創建菜單項和推送按鈕。通過刪除過時的代碼來修改樣板代碼。已從UI表單中刪除了推送按鈕，因此還需要從Page1.qml中刪除相應的代碼（否則無法構建應用程序）。

現在UI已經準備好，可以切換到在文本編輯器中編輯main.qml文件，以添加動畫到應用程序，如下一節所述。

添加應用邏輯

編輯 main.qml 文件，添加兩個額外狀態 State1 和 State2 的指針。你無法使用表單編輯器為 Window QML 類型添加狀態。請使用文本編輯器將狀態添加到 StateGroup QML 類型中，并通過使用狀態組的 id 引用它們。\

1. 將窗口大小和背景顏色指定為 ApplicationWindow 類型的屬性：

   ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("Tabs")
   

2. 為 Page1 類型指定一個 id，以便能夠使用在 Page1Form.ui.qml 中導出的屬性：

   SwipeView {id: swipeViewanchors.fill: parentcurrentIndex: tabBar.currentIndexPage1Form {id: page
   

3. 在 mouseArea 中添加一個指向點擊表達式的指針：

   	mouseArea {onClicked: stateGroup.state = ' '}
   

4. 該表達式將狀態設置為基本狀態，并將圖像返回到初始位置。
   在 mouseArea1 中添加一個指向點擊表達式的指針，將狀態設置為 State1：

   	mouseArea1 {onClicked: stateGroup.state = 'State1'}
   

5. 在 mouseArea2 中添加一個指向點擊表達式的指針，將狀態設置為 State2：

       mouseArea2 {onClicked: stateGroup.state = 'State2'}
   }
   

6. 將 Qt 標志的位置綁定到矩形，以確保在不同大小的屏幕上縮放視圖時，標志顯示在矩形內部。設置 x 和 y 屬性的表達式，如下面的代碼片段所示：

     StateGroup {id: stateGroupstates: [State {name: "State1"PropertyChanges {target: page.iconx: page.middleRightRect.xy: page.middleRightRect.y}},State {name: "State2"PropertyChanges {target: page.iconx: page.bottomLeftRect.xy: page.bottomLeftRect.y}}]
   

7. 按 Ctrl+R 運行應用程序。
   點擊矩形以將 Qt 標志從一個矩形移動到另一個矩形。

為視圖添加動畫

在狀態組內添加過渡以定義當Qt標志在狀態之間移動時屬性如何變化。這些過渡將動畫應用于Qt標志。例如，當它移動到middleRightRect時，Qt標志會反彈回來，并平穩地進入bottomLeftRect。

1. 在文本編輯器中，添加以下代碼以指定當移動到State1時，Qt標志的x和y坐標在線性時間內變化1秒鐘：

     transitions: [Transition {from: "*"; to: "State1"NumberAnimation {easing.type: Easing.OutBounceproperties: "x,y";duration: 1000}},
   

2. 可以使用Qt Quick工具欄中的動畫功能將緩動曲線類型從線性更改為OutBounce：
   a. 在文本編輯器中單擊NumberAnimation以顯示
   圖標，然后單擊該圖標以打開工具欄：
   
   b. 在Easing字段中，選擇Bounce。
   c. 在Subtype字段中，選擇Out。

3. 添加以下代碼以指定當移動到State2時，Qt標志的x和y坐標在2秒鐘內變化，并且使用InOutQuad緩動函數：

     ...Transition {from: "*"; to: "State2"NumberAnimation {properties: "x,y";easing.type: Easing.InOutQuad;duration: 2000}},
   

4. 添加以下代碼以指定對于任何其他狀態變化，Qt標志的x和y坐標在線性時間內變化200毫秒：

     ...Transition {NumberAnimation {properties: "x,y";duration: 200}}]
   

按Ctrl+R運行應用程序。
單擊矩形以查看動畫過渡效果。

素材文件

Files:

• transitions/Page1Form.ui.qml
• transitions/Page2Form.ui.qml
• transitions/main.qml
• transitions/qml.qrc
• transitions/transitions.pro

Images:

• transitions/qt-logo.png

參考文章

QT快速入門：創建您的第一個QML應用