Back to Qt.io
Contact Us Blog Download Qt

教程如何

教程：Qt Quick 应用程序

如何在Edit 模式下创建Qt Quick 应用程序。

本教程说明了 Qt Quick.有关用户界面选择的更多信息，请参阅用户界面。

本教程介绍了在使用 Qt 6 作为最小 Qt 版本和 CMake 作为构建系统时，如何使用Qt Creator 来实现状态和转换。

您将使用编辑模式创建一个应用程序，当您选择三个矩形时，它们会在三个矩形之间移动 Qt 徽标。

有关更多示例，请参阅Qt Quick 示例和教程。

您可以使用可视化编辑器在Qt Design Studio 中开发Qt Quick 应用程序。更多信息，请参阅Qt Design Studio 文档。

创建项目

  1. 转到File >New Project >Application (Qt) > 。 Qt Quick Application.

    新项目对话框

  2. 选择Choose ，打开Project Location 对话框。
  3. 在Name 中，输入应用程序的名称。为自己的项目命名时，请注意以后不能轻易重命名。
  4. 在Create in 中，输入项目文件的路径。以后可以移动项目文件夹。
  5. 选择Next 打开Define Project Details 对话框。

    定义项目详细信息对话框

  6. 选择Next ，打开Kit Selection 对话框。
  7. 为要构建应用程序的平台选择 Qt 6.5 或更高版本的工具包。要为移动设备构建应用程序，请同时选择 Android 和 iOS 的工具包。

    注： 列表显示的是您在首选项>Kits 中指定的工具包。更多信息，请参阅添加工具包和工具包。

  8. 选择Next ，打开Project Management 对话框。
  9. 查看项目设置，然后选择Finish （或 macOS 上的Done ）创建项目。

Qt Creator 生成组件文件Main.qml，并在 模式下打开。Edit

部署应用程序

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

要在运行应用程序时显示图片，必须在向导为您创建的CMakeLists.txt文件RESOURCES 部分中将其指定为资源：

qt_add_qml_module(apptransitions
    URI transitions
    VERSION 1.0
    QML_FILES Main.qml Page.qml
    RESOURCES qt-logo.png
)

创建自定义 QML 类型

由于Window QML 类型要求将状态添加到子组件中，因此请使用向导创建名为Page的自定义 QML 类型，并在Main.qml 中引用。

创建自定义 QML 类型：

  1. 转到File >New File 。
  2. 选择Qt > 。 QML File (Qt Quick 2).
  3. 选择Choose ，打开Location 对话框。
  4. 在File name 中，输入自定义 QML 类型的名称：页面。
  5. 选择Next ，打开Project Management 对话框。
  6. 选择Finish 创建Page.qml。

Qt Creator 在 模式下打开Edit Page.qml。它有一个 类型的根项。将其替换为 类型。赋予该类型以 IDItem Rectangle page，将其四边锚定到父项上，并将其颜色设为白色：

import QtQuick

Rectangle {
    id: page
    anchors.fill: parent
    color: "#ffffff"

当你开始键入 QML 类型名称时，Qt Creator 会建议使用可用的类型和属性来完成代码。

选择类型名称旁边的灯泡图标灯泡图标 ，打开一个工具栏，用于指定矩形属性，如颜色、透明度和渐变。

用于矩形的 Qt Quick 工具栏

接下来，添加一个图像类型，并将qt-logo.png作为源代码。你也可以使用任何其他图片或组件。将图片放置在矩形的左上角：

    Image {
        id: icon
        x: 20
        y: 20
        source: "qt-logo.png"
    }

使用图像工具栏指定图像属性，如源文件和填充模式。

图像 Qt Quick 工具栏中可见的徽标

现在，创建图像将在其间移动的矩形。它们的大小应与图像大小相匹配，并且应该是透明的，这样图像才会可见。将边框颜色设置为浅灰色，使矩形可见：

    Rectangle {
        id: topLeftRect
        width: 55
        height: 41
        color: "#00ffffff"
        border.color: "#808080"

将矩形锚定到父对象上，使其位于父对象的左上角和左下角，以及右边缘的垂直中心。以下代码片段将矩形锚定到父对象的左上角：

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 20
        anchors.topMargin: 20

添加MouseArea 类型，使用户可以点击矩形：

        MouseArea {
            id: mouseArea
            anchors.fill: parent

要检查您的代码，请与Page.qml示例文件进行比较。

接下来，通过添加状态并将鼠标点击与状态变化连接起来，使图像在用户点击矩形时在矩形之间移动。

将鼠标点击与状态变化连接起来

要使图像在用户选择矩形时在矩形之间移动，可在页面组件中添加状态，改变图标属性x 和y 的值，使其与右中和左上角矩形的值相匹配。为了确保在不同尺寸的屏幕上缩放视图时，图像能保持在矩形内，请将图标的x 和y 属性值与矩形的属性值绑定：

    ...
    states: [
        State {
            name: "State1"
        },
        State {
            name: "State2"

            PropertyChanges {
                target: icon
                x: middleRightRect.x
                y: middleRightRect.y
            }
        },
        State {
            name: "State3"

            PropertyChanges {
                target: icon
                x: bottomLeftRect.x
                y: bottomLeftRect.y
            }
        }
    ]

然后，将鼠标区域的onClicked 信号与状态变化连接起来：

            Connections {
                target: mouseArea
                function onClicked()
                {
                    page.state = "State1"
                }

由于您使用 Qt 6 进行开发，因此必须将连接指定为函数。

在主视图中添加页面

打开Main.qml进行编辑，并添加一个 Page 自定义组件实例：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Transitions")

    Page {
        id: page
        anchors.fill: parent
    }
}

选择Ctrl+R运行应用程序，然后选择矩形，将 Qt 徽标从一个矩形移到另一个矩形。

动画过渡

创建过渡效果，将动画应用于图像。例如，当图像移动到middleRightRect时会弹回，然后缓缓移动到bottomLeftRect。

指定从每个状态切换到其他两个状态的过渡：

    transitions: [
        Transition {
            id: toState1
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        duration: 200
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        duration: 200
                    }
                }
            }
            to: "State1"
            from: "State2,State3"
        },

将过渡到状态 2的缓和曲线类型从线性改为Easing.OutBounce ，以创建弹跳效果：

        Transition {
            id: toState2
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        easing.type: Easing.OutBounce
                        duration: 1006
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        easing.type: Easing.OutBounce
                        duration: 1006
                    }
                }
            }
            to: "State2"
            from: "State1,State3"
        },

注： 使用动画工具栏指定缓和曲线类型和动画持续时间。

用于动画的 Qt Quick 工具栏

然后，将状态 2过渡的缓和曲线类型从线性改为Easing.InOutQuad ，以创建缓和效果：

        Transition {
            id: toState3
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        easing.type: Easing.InOutQuad
                        duration: 2000
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        easing.type: Easing.InOutQuad
                        duration: 2000
                    }
                }
            }
            to: "State3"
            from: "State1,State2"
        }
    ]
}

选择Ctrl+R运行应用程序，然后选择矩形查看动画过渡效果。

文件：

图像

教程如何

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.