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

一、创建工程选择文件>新建文件或项目>Application (Qt Quick) > Qt Quick Application - Empty按照修改项目目录、名称、编译器等。创建好的项目如下图：使用Text Editor模式打开main.qml，想到模板建立的是Window类型，该类型不支持添加状态。因此需要使用Rectangle类型替代Window类型，同时要移除title

望天边星宿

2109人浏览 · 2021-03-04 21:08:19

望天边星宿 · 2021-03-04 21:08:19 发布

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

一、创建工程

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

创建好的项目如下图：
在这里插入图片描述
使用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切换到设计模式。
在这里插入图片描述
选择Library > Assets > Add New Assests，定位到自己想要添加图片的目录即可将其添加到项目目录，将图片从Assets内拖拽到Navigator内。

在这里插入图片描述

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

在id栏，输入：icon
在Position栏，设置X为10，Y为10。
在size栏，设置W为50，H为50。

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

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

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

在这里插入图片描述

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

UI设计已经完成。

三、连接Mouse Area与状态转换

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

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

在States视图，选择Create New State三次，创建State1，State2和State3。
在States内选择State1。
打开Actions菜单，并且选择State1作为默认状态。
在States内选择State2。
在Navigator选择icon并且在Form Ediitor内将其拖拽到中间右侧的矩形上。使他们的x和y坐标像匹配。
在States内选择State3。
在Navigator选择icon并且在Form Ediitor内将其拖拽到下部左侧的矩形上。使他们的x和y坐标像匹配。

在这里插入图片描述

在Connections视图中，点击+按钮创建一组新的连接。
双击Target栏并且在列表中选择mouseArea。
在Singnal Handler列，选择onClicked。
在Action列，选择page.state=‘State1’;
创建另外两个连接，分别将mouseArea1连接State2，mouseArea2连接State3。
工具 > 选项 > 构建和运行 > 取消使用jom代替nmake
【标记1】由于主窗口的根元素为Rectangle无法运行，所以需要在其最外面添加一个Window元素。并进行一些配置。即根元素为Window，嵌套元素为Rectangle。

起初，是将根元素从Window改成了Rectangle，因为在Window元素内无法添加状态（三种状态，分别对应图标的三个位置）。将根元素改为Rectangle后会由于程序原因无法运，所以需要在Rectangle的最外面添加一个Window，但此时如果进入设计模式，将无法看到三种状态，因为这三种状态是在Rectangle内，而不是在Window内。
按Ctrl+R运行应用。

在这里插入图片描述

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

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

四、动画转场

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

工具栏View > 视图 > Transition Editor。
在Transition Editor视图，点击"+"按钮创建新的过度（transition）。
点击此按钮指定过度对应的状态。
在Transition ID中，输入toState1.
在From中，选择State2和State3.
在To中，选择State1.
点击“+”为State2和State3添加过度，IDs分别选择toState2和toState3.
选择Close保存设定并且返回至Transition Editor。
选择toState2在过度列表中。
将蓝色时间轴边界改到1000帧，表示动作运动的时间为1s。x和y也分别改到1000。
选择x的蓝条，并点击该按钮来改变easing curve。
在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。
对toState2的属性y进行相同操作。
选择toState3，将蓝色时间轴的边界改到2000帧，表示动作运动的时间为2s。x和y也分别改到2000。
在Easing Curve编辑中，将x和y的easing curve的状态从线性改为[0.455,0.03,0.515,0.955,1,1]
选择toState1，将蓝色时间轴的边界改到200帧，表示运动时间为200ms。Easing Curve曲线不需要修改。
按照【标记1】处的内容进行修改。
按Ctrl+R运行应用。