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

柔情只为你懂 2022-11-17 03:38 282阅读 0赞

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

本教程描述了如何使用Qt Creator来实现Qt Quick状态和转换。我们创建一个显示Qt徽标的应用程序，当您单击它们时，该徽标会在页面上的三个矩形之间移动。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]  
有关在设计模式下开发Qt Quick应用程序的更多信息，请参见[开发Qt Quick应用程序][Qt Quick]。

有关使用Qt快速控件的示例，请参见[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**来显示它。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

1.  在**导航**中选择**Rectangle**，然后在**Properties**视图的Id字段中输入page  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]
2.  选择**库> Assets(资源) > Add New Assets**以找到qt-logo.png（或您自己的图像）并将其添加到项目文件夹中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]
3.  在**Navigator**中将图像从**Assets**拖放到页面中
4.  在**Properties**中，编辑图像属性：
    
     *  在**Id**字段中，输入`icon`。
     *  在**Position**字段中，将X设置为10，将Y设置为20。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]
5.  选择**Library > QML Types > Qt Quick - Basic**，选择**Rectangle**并且将其拖放到**导航**中的`page`（页面）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 6]
6.  在**Properties**中，编辑矩形属性：
    
     *  在**Id**字段中，输入`topLeftRect`。
     *  在**Size**字段中，将W设置为55，将H设置为41，以使矩形大小与图像大小匹配。
     *  在Color(颜色)字段中，单击![在这里插入图片描述][20210408094536436.png]  
        （透明）按钮以使矩形透明。
     *  在Border color（边框颜色）字段中，将边框颜色设置为＃808080，以使矩形在白色背景上可见。
     *  单击**Layout**（布局），然后单击![在这里插入图片描述][20210408095005525.png]  
        （顶部）和![在这里插入图片描述][20210408095012191.png]  
        （左侧）锚定按钮以将矩形锚定到页面的左上角。
    
    1.  在**Margin**字段中，为顶部锚点选择20，为左侧锚点选择10。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 7]
        
        1.  从**库**中选择一个**Mouse Area**拖放到导航部分的topLeftRect下。  
            ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 8]
7.  单击**Layout**，然后单击![在这里插入图片描述][20210408135450963.png]  
    （“填充到父项”）按钮以将鼠标区域锚定到矩形。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 9]
8.  在导航中，复制topLeftRect（通过按**Ctrl + C**键），并将其粘贴到页面中导航两次（通过按下Ctrl + V键）。Qt Creator重命名类型为topLeftRect1和topLeftRect2的新实例。
9.  选择topLeftRect1并编辑其属性：
    
     *  在ID字段中，输入`middleRightRect`。
     *  在**Layout**中，选择![在这里插入图片描述][20210408135745984.png]  
        （垂直中心锚点按钮），然后选择![在这里插入图片描述][20210408135752924.png]  
        （右）锚点按钮以将矩形锚定到其父级的右中间空白处。
     *  在**Margin**字段中，为右锚点选择10，为垂直中心锚点选择0。
10. 选择topLeftRect2并编辑其属性：

*  在ID字段中，输入bottomLeftRect。
 *  在**Layout**布局中，选择![在这里插入图片描述][20210408140005730.png]  
    （底部）和![在这里插入图片描述][20210408140011371.png]  
    （左侧）定位按钮以将矩形定位到其父级的左下边缘。
 *  在\*\*Margin(边距)\*\*字段中，为底部锚点选择20，为左侧锚点选择10。

1.  按Ctrl + S保存更改。

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

现在，UI设计已准备就绪。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 10]  
有关您使用的视图的更多信息，请参见：

*  [创建组件][Link 2]
 *  [管理项目层次结构][Link 3]
 *  [指定项目属性][Link 4]

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

## 连接鼠标单击以改变状态 ##

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

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

*  在**States**视图，选择**Create New State**三次创造`State1, State2, and State3.`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 11]
 *

[Link 1]: http://doc.qt.io/qt-5/topics-ui.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20221022/6ef764242fbb409181e042dd17b5a8c2.png
[Qt Quick]: https://doc.qt.io/qtcreator/creator-visual-editor.html
[Qt]: http://doc.qt.io/qt-5/qtquickcontrols2-examples.html
[Window]: http://doc.qt.io/qt-5/qml-qtquick-window-window.html
[Rectangle]: https://doc.qt.io/qtcreator/quick-shapes.html#basic-rectangle
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: /images/20221022/b2266eb1c3a741df8683279b05732f70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: /images/20221022/f62dc13ae08c4428b62d10f3b241d6b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: /images/20221022/f9d487ac995d40a3a9e14eeae237b7be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]: /images/20221022/4e97e51ced1a43068b37672d1782a75e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]: /images/20221022/c798a74722d3483b92e48c7b4e4c6967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 6]: /images/20221022/4e4eebe1f028485e8cc2ebd2cd47f86e.png
[20210408094536436.png]: /images/20221022/c3bf1239a0b842cf907c5989a664f8b6.png
[20210408095005525.png]: /images/20221022/ad4f7b389b72484c89d673570ba777c3.png
[20210408095012191.png]: /images/20221022/63e05cde6cb04e1b99358037f61c1f63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 7]: /images/20221022/70358bb78c3847b497c9dfab984605d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 8]: /images/20221022/ff3a2a377f484e3aad8e767b482b43e1.png
[20210408135450963.png]: /images/20221022/af20b1bc8e084ec4b4762eced0b1d561.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 9]: /images/20221022/9726882477c049978de11e24e7a91174.png
[20210408135745984.png]: /images/20221022/a3916d8e184f4a1896deb47a28b9b0b8.png
[20210408135752924.png]: /images/20221022/4d80a1b88d0b4322bd7fd3eb6899d25b.png
[20210408140005730.png]: /images/20221022/8db0c3158b564c5eb68507cd74378d96.png
[20210408140011371.png]: /images/20221022/df89bbd20d774abb9029a982111254ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 10]: /images/20221022/e944335e6d85429b86ce55c0b0448d64.png
[Link 2]: https://doc.qt.io/qtcreator/quick-components.html
[Link 3]: https://doc.qt.io/qtcreator/qtquick-navigator.html
[Link 4]: https://doc.qt.io/qtcreator/qtquick-properties.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 11]: /images/20221022/7e7c4ecc895b476c98d976807893a704.png