Qt：创建一个Qt quick应用程序

本教程使用内置的QML类型，并说明了Qt Quick的基本概念。有关您拥有的UI选择的更多信息，请参见“用户界面”。

本教程描述了如何使用Qt Creator来实现Qt Quick状态和转换。我们创建一个显示Qt徽标的应用程序，当您单击它们时，该徽标会在页面上的三个矩形之间移动。

有关在设计模式下开发Qt Quick应用程序的更多信息，请参见开发Qt Quick应用程序。

有关使用Qt快速控件的示例，请参见Qt快速控件示例。

创建项目

1. File > New File or Project > Application (Qt Quick) > Qt Quick Application - Empty.
2. 选择Choose 以打开Project Location对话框。
3. 在名称字段中，输入应用程序的名称
4. 在创建路径字段中，输入项目文件的路径。
5. 选择下一步以打开定义构建系统对话框。
6. 在“构建系统字段中，选择用于构建和运行项目的构建系统：qmake，CMake或Qbs。
7. 选择下一步以打开定义项目详细信息对话框。
8. 选择下一步以使用默认设置并打开翻译文件对话框。
9. 选择下一步以使用默认设置并打开套件选择对话框。
10. 选择要为其构建应用程序的平台的工具包。要构建用于移动设备的应用程序，请选择适用于Android ARM和iPhone OS的套件。
11. 选择下一步以打开项目管理对话框。
12. 查看项目设置，然后选择完成以创建项目。

Qt Creator生成一个QML文件，main.qml，并在文本编辑器中打开它。向导模板使用Window类型，该类型不支持添加状态。因为我们想在本例中使用状态，所以我们首先用Rectangle类型替换Window类型。我们还必须删除设置title属性的行，这是矩形类型没有的。如果在Properties视图中更改Type属性的值，Qt Creator会自动删除title属性。

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle {
    visible: true
    width: 640
    height: 480
}

创建主视图

应用程序的主视图在视图的左上角的矩形和两个空白矩形内显示Qt徽标。

在本教程中，我们使用qt-logo.png图像，但是您也可以使用任何其他图像或QML类型。

注意：如果视图是隐藏的，则可以通过选择View > Views来显示它。

1. 在导航中选择Rectangle，然后在Properties视图的Id字段中输入page
   

2. 选择库> Assets(资源) > Add New Assets以找到qt-logo.png（或您自己的图像）并将其添加到项目文件夹中。
   

3. 在Navigator中将图像从Assets拖放到页面中

4. 在Properties中，编辑图像属性：

   • 在Id字段中，输入icon。
   • 在Position字段中，将X设置为10，将Y设置为20。
     

5. 选择Library > QML Types > Qt Quick - Basic，选择Rectangle并且将其拖放到导航中的page（页面）
   

6. 在Properties中，编辑矩形属性：

   • 在Id字段中，输入topLeftRect。
   • 在Size字段中，将W设置为55，将H设置为41，以使矩形大小与图像大小匹配。
   • 在Color(颜色)字段中，单击
     （透明）按钮以使矩形透明。
   • 在Border color（边框颜色）字段中，将边框颜色设置为＃808080，以使矩形在白色背景上可见。
   • 单击Layout（布局），然后单击
     （顶部）和
     （左侧）锚定按钮以将矩形锚定到页面的左上角。
   6. 在Margin字段中，为顶部锚点选择20，为左侧锚点选择10。
      
      8. 从库中选择一个Mouse Area拖放到导航部分的topLeftRect下。
         

7. 单击Layout，然后单击
   （“填充到父项”）按钮以将鼠标区域锚定到矩形。
   

8. 在导航中，复制topLeftRect（通过按Ctrl + C键），并将其粘贴到页面中导航两次（通过按下Ctrl + V键）。Qt Creator重命名类型为topLeftRect1和topLeftRect2的新实例。

9. 选择topLeftRect1并编辑其属性：

   • 在ID字段中，输入middleRightRect。
   • 在Layout中，选择
     （垂直中心锚点按钮），然后选择
     （右）锚点按钮以将矩形锚定到其父级的右中间空白处。
   • 在Margin字段中，为右锚点选择10，为垂直中心锚点选择0。

10. 选择topLeftRect2并编辑其属性：

• 在ID字段中，输入bottomLeftRect。
• 在Layout布局中，选择
  （底部）和
  （左侧）定位按钮以将矩形定位到其父级的左下边缘。
• 在**Margin(边距)**字段中，为底部锚点选择20，为左侧锚点选择10。

10. 按Ctrl + S保存更改。

要检查代码，可以在文本编辑器中查看main.qml文件，并将其与main.qml示例文件进行比较。

现在，UI设计已准备就绪。

有关您使用的视图的更多信息，请参见：

• 创建组件
• 管理项目层次结构
• 指定项目属性

接下来，当用户单击矩形时，我们将通过添加状态以及将鼠标单击连接到状态更改来使图像在矩形之间移动

连接鼠标单击以改变状态

为使图像在用户单击时在矩形之间移动，我们添加了状态，在这些状态中，我们更改了图标的x和y属性值以匹配右中和左上矩形的值。然后，我们将鼠标区域的onClicked信号连接到状态更改

为了确保在不同尺寸的屏幕上缩放视图时，图像都显示在矩形内，我们将图标的x和y属性值绑定到矩形的值

• 在States视图，选择Create New State三次创造State1, State2, and State3.