教程：Qt Quick应用程序

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

本教程介绍了Qt Quick的基本概念。有关可用的UI选择的更多信息，请参见用户界面。

本教程描述了如何在Qt 6作为最低Qt版本和CMake作为构建系统时，使用Qt Creator实现状态和过渡。

您将使用编辑模式创建一个应用程序，当您单击时，可以在三个矩形之间移动Qt标志。

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

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

创建项目

选择您要构建应用的平台的套件，版本需为 Qt 6.4 或更高。若要为移动设备构建应用，请同时选择 Android 和 iOS 的套件。

注意：此列表显示您在 “首选项” > “套件” 中指定的套件。有关更多信息，请参阅 “添加套件” 和 “套件”。
选择 “下一步” 以打开 “项目管理” 对话框。
查看项目设置，然后选择 “完成”（或 macOS 上的“完成”）来创建项目。

有关您跳过的设置的更多信息，请参阅 “创建 Qt Quick 应用”。

Qt Creator 生成组件文件 Main.qml 并在 “编辑” 模式下打开它。

部署应用程序

应用主视图在视图的左上角显示一个 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 类型

转到 “文件” > “新建文件”。
选择 “Qt” > “QML 文件（Qt Quick 2）”。
选择 “选择” 以打开 “位置” 对话框。
在 “文件名” 中，为自定义 QML 类型输入名称： Page。
选择 “下一步” 以打开 “项目管理” 对话框。
选择 “完成” 以创建 Page.qml。

Qt Creator 以 “编辑” 模式打开 Page.qml。它有一个 Item 类型的根项。用 Rectangle 类型替换它。将该类型命名为 page，将其锚定到父项的所有边，并设置其颜色为白色

import QtQuick

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

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

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

{Qt Quick toolbar for rectangles}

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

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

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

{Logo visible in Qt Quick toolbar for images}

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

    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 示例文件进行比较。

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

将鼠标点击连接到状态变化

为使图片在用户点击时在矩形之间移动，请向Page组件添加状态，更改icon的x和y属性值以匹配中间右和顶部左矩形的值。为了确保在屏幕不同尺寸的缩放视图下图片保持在矩形内，请绑定icon的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，你必须指定连接作为函数。

将Page添加到主视图中

打开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"
        },

将过渡的缓动曲线类型从线性更改为Easing.OutBounce，以创建弹动效果，并将过渡的缓动曲线类型从线性更改为State2

        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 Toolbar for animation}

然后，将过渡的缓动曲线类型从线性更改为State2的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运行应用程序，并点击矩形以查看动画过渡。

文件

图片

transitions/qt-logo.png

教程如何