【Qt】Qt Creater创建一个Qt Quick Application

左手的ㄟ右手 2022-11-04 13:29 315阅读 0赞

效果演示：  
![在这里插入图片描述][20210304210720681.gif]  
参考：[https://doc.qt.io/qtcreator/qtcreator-transitions-example.html][https_doc.qt.io_qtcreator_qtcreator-transitions-example.html]

--------------------

# 一、创建工程 #

选择**文件** > **新建文件或项目** > **Application (Qt Quick)** > **Qt Quick Application - Empty**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]  
按照流程修改项目目录、名称、编译器等。

创建好的项目如下图：  
![在这里插入图片描述][20210302214639612.png]  
使用Text Editor模式打开main.qml，向导模板建立的根元素为Window，该类型的元素不支持添加**状态**。因此需要使用Rectangle元素替代Window元素，同时要移除window元素的title属性。

原`main.qml`代码：

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    }

修改后`main.qml`代码

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Rectangle {
        width: 640
        height: 480
        visible: true
    }

# 二、创建主视图 #

将main.qml切换到设计模式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 1]  
选择**Library** > **Assets** > **Add New Assests**，定位到自己想要添加图片的目录即可将其添加到项目目录，将图片从Assets内拖拽到Navigator内。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 2]

在**属性**(**Properties**)中，编辑图片的属性。

*  在**id**栏，输入：icon
 *  在**Position**栏，设置X为10，Y为10。
 *  在**size**栏，设置W为50，H为50。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 3]

在右侧**Library** > **QML Type** > **Qt Quick Basic**，选择**Rectangle**拖动到界面中。

在**属性**(**Properties**)中，编辑矩形的属性。

*  在**id**栏，输入：topLeftRect
 *  在**size**栏，设置W为50，H为50，使矩形的尺寸匹配图片的尺寸。
 *  在**Color**栏，点击Transparent按钮，使图像具有透明度  
    ![在这里插入图片描述][20210303095852997.png]
 *  在**Border Color**栏，设置border color为`#808080`使得矩形在白色背景上可见。  
    ![在这里插入图片描述][20210303100736631.png]
 *  点击**Layout**，分别点击Top和Left 按钮，使矩形位于左上角。
 *  在**Margin**栏，top anchor选择20，left anchor选择10。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 5]

*  在**Library**中选择**Mouse Area**拖拽到**Navigator**中的*topLeftRect*。
 *  点击**Layout**，并且点击**Fill to Parent**按钮使mouse area充满rectangle。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 6]
 *  在**Navigator**，复制topLeftRect（Ctrl+C）将该目标复制到**Navigator**两次（Ctrl+V），并且分别重命名为 topLeftRect1 和 topLeftRect2。
 *  选择topLeftRect1并编辑属性。
    
     *  在**id**栏，输入middleRightRect。
     *  在**Layout**选择**Vertical Center**按钮，再按**Right**按钮。
     *  在**Margin**栏，right anchor选择10，vertical center anchor选择0  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 7]
 *  选择topLeftRect2并编辑属性。
    
     *  在**id**栏，输入bottomLeftRect。
     *  在**Layout**选择**Bottom**按钮，再按**Left**按钮。
     *  在**Margin**栏，bottom anchor选择10，lrft anchor选择0。
 *  按**Ctrl+S**保存更改。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 8]

UI设计已经完成。

# 三、连接Mouse Area与状态转换 #

当点击界面时，使图片在矩形之间切换，我们需要添加状态，使icon的x和y坐标匹配三个矩形的位置。因此，需要连接onClicked信号与mouse areas来切换状态。

为了保证矩形能够按照设定尺寸显示在不同尺寸的显示器上，需要约束icon的x、y和这些矩形。

*  在**States**视图，选择Create New State三次，创建*State1*，*State2*和*State3*。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 9]
 *  在**States**内选择*State1*。
 *  打开Actions菜单，并且选择*State1*作为默认状态。  
    ![在这里插入图片描述][20210303110004327.png]
 *  在**States**内选择*State2*。
 *  在**Navigator**选择*icon*并且在**Form Ediitor**内将其拖拽到中间右侧的矩形上。使他们的x和y坐标像匹配。
 *  在**States**内选择*State3*。
 *  在**Navigator**选择*icon*并且在**Form Ediitor**内将其拖拽到下部左侧的矩形上。使他们的x和y坐标像匹配。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 10]

*  在**Connections**视图中，点击+按钮创建一组新的连接。
 *  双击**Target**栏并且在列表中选择mouseArea。
 *  在**Singnal Handler**列，选择onClicked。
 *  在**Action**列，选择page.state=‘State1’;
 *  创建另外两个连接，分别将**mouseArea1**连接State2，**mouseArea2**连接State3。  
    ![在这里插入图片描述][20210304184729600.png]
 *  工具 > 选项 > 构建和运行 > 取消使用jom代替nmake  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 11]
 *  【标记1】由于主窗口的根元素为**Rectangle**无法运行，所以需要在其最外面添加一个**Window**元素。并进行一些配置。即根元素为Window，嵌套元素为Rectangle。  
    ![在这里插入图片描述][20210304191805380.png]  
    起初，是将根元素从Window改成了Rectangle，因为在Window元素内无法添加状态（三种状态，分别对应图标的三个位置）。将根元素改为Rectangle后会由于程序原因无法运，所以需要在Rectangle的最外面添加一个Window，但此时如果进入设计模式，将无法看到三种状态，因为这三种状态是在Rectangle内，而不是在Window内。
 *  按**Ctrl+R**运行应用。

![在这里插入图片描述][2021030419213399.gif]

错误: 若果出现`QML Image: Cannot open: qrc:/icon.jpg`，则在该根目录下添加次图片。选择‘/’目录，右键添加现有文件。  
![在这里插入图片描述][20210304185844765.png]

点击矩形移动图标从一个矩形到另一个矩形。

# 四、动画转场 #

在上一步，如果想要运行程序，需要在Rectangle的外面添加一个Window。现在，我们将要添加动画，所以把刚刚添加的Window删掉，继续原来的代码。就是将【标记1】修改的部分改回来。

*  工具栏**View** > **视图** > **Transition Editor**。
 *  在**Transition Editor**视图，点击"**+**"按钮创建新的过度（transition）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 12]
 *  点击此按钮指定过度对应的状态。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 13]
 *  在**Transition ID**中，输入*toState1*.
 *  在**From**中，选择*State2*和*State3*.
 *  在**To**中，选择*State1*.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 14]
 *  点击“**+**”为*State2*和*State3*添加过度，IDs分别选择*toState2*和*toState3*.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 15]
 *  选择**Close**保存设定并且返回至**Transition Editor**。
 *  选择*toState2*在过度列表中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 16]
 *  将蓝色时间轴边界改到1000帧，表示动作运动的时间为1s。x和y也分别改到1000。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 17]
 *  选择x的蓝条，并点击该按钮来改变easing curve。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 18]
 *  在Easing Curve编辑中。将`[0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752, 0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888, 0.901,0.916,0.901,0.923,0.995,1,1]`填写在Text中，并点击ok。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 19]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 20]
 *  对toState2的属性y进行相同操作。
 *  选择toState3，将蓝色时间轴的边界改到2000帧，表示动作运动的时间为2s。x和y也分别改到2000。
 *  在Easing Curve编辑中，将x和y的easing curve的状态从线性改为`[0.455,0.03,0.515,0.955,1,1]`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 21]
 *  选择toState1，将蓝色时间轴的边界改到200帧，表示运动时间为200ms。Easing Curve曲线不需要修改。
 *  按照【标记1】处的内容进行修改。
 *  按**Ctrl+R**运行应用。

![在这里插入图片描述][2021030421071022.gif]

[20210304210720681.gif]: /images/20221023/2ee7ab10710f45e4897b6b127f203014.png
[https_doc.qt.io_qtcreator_qtcreator-transitions-example.html]: https://doc.qt.io/qtcreator/qtcreator-transitions-example.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]: /images/20221023/c37d6faa3c1f48ccad69710ca8e05119.png
[20210302214639612.png]: /images/20221023/5af5508fa0e5409daba5a901821fc65c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 1]: /images/20221023/64752c023f154ce392c0bf604cc55de0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 2]: /images/20221023/810d78ebafea45a0ac78f3ea20adbdd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 3]: /images/20221023/4cd3197a03674795a4abcc00f1a58135.png
[20210303095852997.png]: /images/20221023/41dbd872b6bd4a3f856a77232a9661a8.png
[20210303100736631.png]: /images/20221023/4594b7a5c3174878af3ec8a8aeb554fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 4]: /images/20221023/9275e2e5f5c8456a891cacf8cff24361.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 5]: /images/20221023/e9b0f9b689514522922a6169e499f7b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 6]: /images/20221023/ee3c6c1acf5f4299a6d6c0938b3b5a78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 7]: /images/20221023/8532acc63bf040eb802407a604a6bf12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 8]: /images/20221023/a2db3b698f54466ab624055a5fe5a5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 9]: /images/20221023/6ea158e7782e4a0f9cdc10e9f3a42dcc.png
[20210303110004327.png]: /images/20221023/7d4a9780ddf7485dacb807f712cab497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 10]: /images/20221023/2f66000dc8a644f0a13ddacbd2fe61a7.png
[20210304184729600.png]: /images/20221023/06a7d1ed2c104f579ce04b94c54e1366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 11]: /images/20221023/2b6403a340ac40699d051baab8e57e00.png
[20210304191805380.png]: /images/20221023/fea9150edc344efb87499bd4881443a2.png
[2021030419213399.gif]: /images/20221023/98919127bc924c7eaf616ae0514647d3.png
[20210304185844765.png]: /images/20221023/b4e61a350e9641f1b944090a3cd84112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 12]: /images/20221023/eca86a2810144d8d96a5937c573c6840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 13]: /images/20221023/36e23163445d47c4a55404e8022e7f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 14]: /images/20221023/9316c91f49e44d1586e61128c3354e1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 15]: /images/20221023/9f8dfb824746425fae6ae5105f2e7d3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 16]: /images/20221023/9f0ff4bdd87c4c3bb49d65330d48abb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 17]: /images/20221023/a4d3b82f8ecf458db58dd74f47f4f336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 18]: /images/20221023/43ee1c7fc5dc4210af997cb1abe37d6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 19]: /images/20221023/91078ef19b9a4285af32f8f40bde43bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 20]: /images/20221023/752e864ecc87412489207d41ac6c2a91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 21]: /images/20221023/4a14794601134200baf3ea1b44096273.png
[2021030421071022.gif]: /images/20221023/6e64c0f3d45d411d891ccc72d94a669f.png