Qt6 Qt Quick UI原型学习QML第六篇-Toy模板网

这篇具有很好参考价值的文章主要介绍了Qt6 Qt Quick UI原型学习QML第六篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果展示

Qt6 Qt Quick UI原型学习QML第六篇,Qt6 高级开发工程师,qt,ui,Qt6,QML,c++

动画片第一小节

源码（AnimationExample.qml）主文件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12


Window {
    // 为窗口对象设置一个唯一标识符。
    id: window
    // 设置窗口对象可见。
    visible: true
    width: 600
    height: 600
    // 设置窗口的标题
    title: qsTr("QML study")

    Image {
        id: root
        source: "pic//C.png"
        // 设置图片的显示尺寸为400x400像素。
        // sourceSize: Qt.size(600, 600)
        anchors.fill: parent

        // 定义属性变量
        property int padding: 10
        property int duration: 3000
        property bool running: false

        Image {
            id: box
            x: root.padding;
            y: (root.height - height) / 2
            source: "pic//5.jpg"
            sourceSize: Qt.size(200,200)

            // 创建一个对x属性的数值动画。
            NumberAnimation on x {
                // 设置动画的目标值为root.width - box.width - root.padding
                to: root.width - box.width - root.padding
                duration: root.duration // 设置动画的持续时间为root.duration的值。
                running: root.running   // 设置动画是否运行的状态为root.running的值。
            }

            // 创建一个对rotation属性的旋转动画。
            RotationAnimation on rotation {
                // 设置旋转动画的目标值为360度。
                to:360
                duration: root.duration
                running: root.running
            }

            MouseArea {
                anchors.fill: parent
                onClicked: root.running = true
            }
        }
    }

    // 设置动画的目标值为40，持续时间为4000毫秒。意味着greenBox将会从初始位置移动到y坐标为40的位置，并在4000毫秒内完成该过程。
    ClickableImageV2 {
        id: greenBox
        x: 40; y: root.height-height
        source: "pic//1.jpg"
        text: qsTr("animation on property")
        NumberAnimation on y {
            to: 40; duration:3000
            running: root.running
        }
    }

    // 第二个对象使用Behavior on动画。此行为告诉属性它应该对值的每次变化进行动画处理。可以通过设置来禁用该行为enabled: false在……上Behavior元素。
    ClickableImageV2 {
        id: blueBox
        x: (root.width-width)/2; y: root.height-height
        source: "pic//2.jpg"
        text: qsTr("behavior on property")
        Behavior on y {
            NumberAnimation { duration: 3000 }
        }

        //onClicked: y = 40
        // random y on each click
        onClicked: y = 40 + Math.random() * (205-40)
    }

    // 第三个对象使用独立动画。动画被定义为它自己的元素，几乎可以出现在文档中的任何地方。
    ClickableImageV2 {
        id: redBox
        x: root.width-width-40; y: root.height-height
        source: "pic//3.jpg"
        // 当redBox被点击时，触发anim动画开始播放。动画会改变redBox的y属性，使其移动到目标值为40的位置。
        onClicked: anim.start()
        // onClicked: anim.restart()

        text: qsTr("standalone animation")

        NumberAnimation {
            id: anim
            // 设置动画的目标对象为redBox，即要改变属性的对象。
            target: redBox
            // 设置动画要改变的属性为y。
            properties: "y"
            to: 40
            duration: 3000
        }
    }
}

解释语法

import QtQuick 2.12：导入QtQuick模块的版本2.12，用于创建Qt快速应用程序的用户界面。
import QtQuick.Window 2.12：导入QtQuick.Window模块的版本2.12，用于创建窗口对象。
import QtQuick.Controls 2.12：导入QtQuick.Controls模块的版本2.12，用于创建用户界面控件。
Window {}：定义了一个窗口对象，并在花括号内设置窗口的属性和组件。
id: window：为窗口对象设置了一个唯一标识符。
visible: true：设置窗口对象可见。
width: 600：设置窗口的宽度为600个单位。
height: 600：设置窗口的高度为600个单位。
title: qsTr("QML study")：设置窗口的标题为"QML study"，使用qsTr函数进行翻译。
Image {}：定义了一个图片对象，并在花括号内设置图片的属性和组件。
id: root：为图片对象设置了一个唯一标识符。
source: "pic//C.png"：设置了图片的来源为"pic//C.png"。
anchors.fill: parent：设置图片对象填满父级容器。
property int padding: 10：定义了一个属性变量padding，并将其值设置为10。
property int duration: 3000：定义了一个属性变量duration，并将其值设置为3000。
property bool running: false：定义了一个属性变量running，并将其值设置为false。
Image {}：在图片对象内部定义了另一个图片对象，并设置其属性和组件。
id: box：为内部图片对象设置了一个唯一标识符。
x: root.padding：设置了内部图片对象的x坐标为root.padding的值。
y: (root.height - height) / 2：设置了内部图片对象的y坐标为(root.height - height) / 2的值。
source: "pic//5.jpg"：设置了内部图片的来源为"pic//5.jpg"。
sourceSize: Qt.size(200,200)：设置了内部图片的显示尺寸为200x200像素。
NumberAnimation on x {}：创建了一个对x属性的数值动画，并在花括号内设置动画的属性和值。
to: root.width - box.width - root.padding：设置动画的目标值为(root.width - box.width - root.padding)的值。
duration: root.duration：设置动画的持续时间为root.duration的值。
running: root.running：设置动画是否运行的状态为root.running的值。
RotationAnimation on rotation {}：创建了一个对rotation属性的旋转动画，并在花括号内设置动画的属性和值。
to:360：设置旋转动画的目标值为360度。
duration: root.duration：设置旋转动画的持续时间为root.duration的值。
running: root.running：设置旋转动画是否运行的状态为root.running的值。
MouseArea {}：定义了一个鼠标区域对象，并在花括号内设置区域的属性和事件。
anchors.fill: parent：设置鼠标区域对象填满父级容器。
onClicked: root.running = true：当鼠标区域被点击时，将root.running属性设置为true。
ClickableImageV2 {}：定义了一个可点击的图片对象，并在花括号内设置图片的属性和组件。
id: greenBox：为可点击的图片对象设置一个唯一标识符。
x: 40、y: root.height-height：设置可点击的图片对象的x和y坐标的初始值。
source: "pic//1.jpg"：设置可点击的图片的来源为"pic//1.jpg"。
text: qsTr("animation on property")：设置可点击的图片的文本为"animation on property"，使用qsTr函数进行翻译。
NumberAnimation on y {}：创建了一个对y属性的数值动画，并在花括号内设置动画的属性和值。
to: 40：设置动画的目标值为40。
duration:3000：设置动画的持续时间为3000。
running: root.running：设置动画是否运行的状态为root.running的值。
Behavior on y {}：在可点击的图片对象内部使用Behavior元素，用于控制属性的动画处理方式。
NumberAnimation { duration: 3000 }：设置了对属性的数值动画，并设置动画的持续时间为3000。
onClicked: y = 40 + Math.random() * (205-40)：当可点击的图片对象被点击时，将y属性设置为一个40到205之间的随机值。
ClickableImageV2 {}：定义了另一个可点击的图片对象，并在花括号内设置图片的属性和组件。
id: redBox：为可点击的图片对象设置一个唯一标识符。
x: root.width-width-40、y: root.height-height：设置可点击的图片对象的x和y坐标的初始值。
source: "pic//3.jpg"：设置可点击的图片的来源为"pic//3.jpg"。
onClicked: anim.start()：当可点击的图片对象被点击时，触发anim动画开始播放。
text: qsTr("standalone animation")：设置可点击的图片的文本为"standalone animation"，使用qsTr函数进行翻译。
NumberAnimation {}：定义了一个数值动画，用于控制属性的数值变化。
target: redBox：设置动画的目标对象为redBox，即要改变属性的对象。
properties: "y"：设置动画要改变的属性为y。
to: 40：设置动画的目标值为40。
duration: 3000：设置动画的持续时间为3000。

源码子文件（ClickableImageV2.qml）

import QtQuick 2.0

// 用于创建一个可点击的项目（Item）
Item {
    id:root
    // 设置项目的宽度为column子元素的宽度。
    width: column.childrenRect.width
    height: column.childrenRect.height

    // 定义一个名为text的属性，该属性与label的text属性关联，允许在外部访问和修改该属性。
    property alias text: label.text
    property alias source: image.source

    // signal clicked - 声明一个clicked信号，表示项目被点击的事件。
    signal clicked

    Column {
        id:column
        spacing: 10
        Image {
            id: image
            sourceSize: Qt.size(90,90)
        }

        Text {
            id: label
           width: image.width
           // 设置文本的水平对齐方式为居中对齐。
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            color: "#000000"
        }
    }

    MouseArea {
        // 设置鼠标区域的大小与父元素（即Item）相同。
        anchors.fill: parent
        // 当鼠标区域被点击时，触发项目的clicked信号
        onClicked: root.clicked()
    }
}

解释语法

import QtQuick 2.0：导入QtQuick模块的版本2.0，用于创建Qt快速应用程序的用户界面。
Item {}：定义了一个可点击的项目，并在花括号内设置该项目的属性和组件。
id:root：为项目设置了一个唯一标识符。
width: column.childrenRect.width：设置项目的宽度为列（Column）子元素的宽度。
height: column.childrenRect.height：设置项目的高度为列（Column）子元素的高度。
property alias text: label.text：定义了一个名为text的属性，并将其与label的text属性相关联，允许在外部访问和修改该属性。
property alias source: image.source：定义了一个名为source的属性，并将其与image的source属性相关联，允许在外部访问和修改该属性。
signal clicked：声明了一个clicked信号，表示项目被点击的事件。
Column {}：定义了一个列（Column），用于组织子元素的垂直排列。
id:column：为列设置了一个唯一标识符。
spacing: 10：设置列中子元素之间的间隔为10个单位。
Image {}：定义了一个图片对象，并在花括号内设置图片的属性和组件。
id: image：为图片对象设置了一个唯一标识符。
sourceSize: Qt.size(90,90)：设置了图片的显示尺寸为90x90像素。
Text {}：定义了一个文本对象，并在花括号内设置文本的属性和组件。
id: label：为文本对象设置了一个唯一标识符。
width: image.width：设置文本的宽度与图片的宽度相同。
horizontalAlignment: Text.AlignHCenter：设置文本的水平对齐方式为居中对齐。
wrapMode: Text.WordWrap：设置文本的换行模式为自动换行。
color: "#000000"：设置文本的颜色为黑色。
MouseArea {}：定义了一个鼠标区域对象，并在花括号内设置区域的属性和事件。
anchors.fill: parent：设置鼠标区域的大小与父元素（即Item）相同，填满整个区域。
onClicked: root.clicked()：当鼠标区域被点击时，触发项目的clicked信号。文章来源地址https://www.toymoban.com/news/detail-601083.html