創(chuàng)建一個(gè)QT快速應(yīng)用

本教程使用內(nèi)置的QML類型，介紹了Qt Quick的基本概念。有關(guān)可以選擇的用戶界面選項(xiàng)的更多信息，請(qǐng)參閱用戶界面。

本教程描述了如何使用Qt Creator實(shí)現(xiàn)Qt Quick狀態(tài)和過渡。我們創(chuàng)建一個(gè)應(yīng)用程序，在單擊頁面上的三個(gè)矩形時(shí)，顯示一個(gè)移動(dòng)的Qt標(biāo)志。

關(guān)于QML：

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

有關(guān)在設(shè)計(jì)模式下開發(fā)Qt Quick應(yīng)用程序的更多信息，請(qǐng)參閱開發(fā)Qt Quick應(yīng)用程序。

有關(guān)使用Qt Quick控件的示例，請(qǐng)參閱Qt Quick控件示例。

創(chuàng)建項(xiàng)目

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

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

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

Qt Creator生成兩個(gè)UI文件，Page1Form.ui.qml和Page2Form.ui.qml，以及一個(gè)QML文件，main.qml?？梢栽诒韱尉庉嬈髦行薷腜age1Form.ui.qml以創(chuàng)建應(yīng)用程序的主視圖，并在文本編輯器中修改main.qml以添加應(yīng)用程序邏輯。對(duì)于本示例，可以忽略Page2Form.ui.qml。

創(chuàng)建主視圖

應(yīng)用程序的主視圖在視圖的左上角顯示一個(gè)Qt標(biāo)志和兩個(gè)空矩形。

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

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

2. 在導(dǎo)航器中，選擇Label并按Delete鍵刪除它。

3. 在導(dǎo)航器中選擇Page，并在Id字段中輸入page。

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

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

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

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

8. 點(diǎn)擊Layout，然后點(diǎn)擊
   （Fill to Parent）按鈕將鼠標(biāo)區(qū)域錨定到矩形上。

9. 在導(dǎo)航器中，通過按Ctrl+C復(fù)制topLeftRect，并按Ctrl+V將其粘貼到頁面上兩次。Qt Creator會(huì)將新實(shí)例命名為topLeftRect1和topLeftRect2。

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

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

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

13. 按Ctrl+S保存更改。

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

新項(xiàng)目向?qū)騊age1.qml文件添加樣板代碼以創(chuàng)建菜單項(xiàng)和推送按鈕。通過刪除過時(shí)的代碼來修改樣板代碼。已從UI表單中刪除了推送按鈕，因此還需要從Page1.qml中刪除相應(yīng)的代碼（否則無法構(gòu)建應(yīng)用程序）。

現(xiàn)在UI已經(jīng)準(zhǔn)備好，可以切換到在文本編輯器中編輯main.qml文件，以添加動(dòng)畫到應(yīng)用程序，如下一節(jié)所述。

添加應(yīng)用邏輯

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

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

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

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

   SwipeView {
       id: swipeView
       anchors.fill: parent
       currentIndex: tabBar.currentIndex
   
       Page1Form {
           id: page
   

3. 在 mouseArea 中添加一個(gè)指向點(diǎn)擊表達(dá)式的指針：

   	mouseArea {
   	onClicked: stateGroup.state = ' '
   	}
   

4. 該表達(dá)式將狀態(tài)設(shè)置為基本狀態(tài)，并將圖像返回到初始位置。
   在 mouseArea1 中添加一個(gè)指向點(diǎn)擊表達(dá)式的指針，將狀態(tài)設(shè)置為 State1：

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

5. 在 mouseArea2 中添加一個(gè)指向點(diǎn)擊表達(dá)式的指針，將狀態(tài)設(shè)置為 State2：

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

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

     StateGroup {
         id: stateGroup
         states: [
             State {
                 name: "State1"
   
                 PropertyChanges {
                     target: page.icon
                     x: page.middleRightRect.x
                     y: page.middleRightRect.y
                 }
             },
             State {
                 name: "State2"
   
                 PropertyChanges {
                     target: page.icon
                     x: page.bottomLeftRect.x
                     y: page.bottomLeftRect.y
                 }
             }
         ]
   

7. 按 Ctrl+R 運(yùn)行應(yīng)用程序。
   點(diǎn)擊矩形以將 Qt 標(biāo)志從一個(gè)矩形移動(dòng)到另一個(gè)矩形。

為視圖添加動(dòng)畫

在狀態(tài)組內(nèi)添加過渡以定義當(dāng)Qt標(biāo)志在狀態(tài)之間移動(dòng)時(shí)屬性如何變化。這些過渡將動(dòng)畫應(yīng)用于Qt標(biāo)志。例如，當(dāng)它移動(dòng)到middleRightRect時(shí)，Qt標(biāo)志會(huì)反彈回來，并平穩(wěn)地進(jìn)入bottomLeftRect。

1. 在文本編輯器中，添加以下代碼以指定當(dāng)移動(dòng)到State1時(shí)，Qt標(biāo)志的x和y坐標(biāo)在線性時(shí)間內(nèi)變化1秒鐘：

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

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

3. 添加以下代碼以指定當(dāng)移動(dòng)到State2時(shí)，Qt標(biāo)志的x和y坐標(biāo)在2秒鐘內(nèi)變化，并且使用InOutQuad緩動(dòng)函數(shù)：

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

4. 添加以下代碼以指定對(duì)于任何其他狀態(tài)變化，Qt標(biāo)志的x和y坐標(biāo)在線性時(shí)間內(nèi)變化200毫秒：

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

按Ctrl+R運(yùn)行應(yīng)用程序。
單擊矩形以查看動(dòng)畫過渡效果。

素材文件

Files:

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

Images:

• transitions/qt-logo.png

參考文章

QT快速入門：創(chuàng)建您的第一個(gè)QML應(yīng)用文章來源地址http://www.zghlxwxcb.cn/news/detail-646590.html

到了這里，關(guān)于C++QT教程3——手冊(cè)4.11.1自帶教程（筆記）——?jiǎng)?chuàng)建一個(gè)QT快速應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！