Qt6 Qt Quick UI prototype learning QML sixth

---

Show results

first episode of animation

Source code (AnimationExample.qml) main file

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
        }
    }
}

explain grammar

• import QtQuick 2.12: Imports version 2.12 of the QtQuick module, used to create user interfaces for Qt Quick applications.

• import QtQuick.Window 2.12: Imports version 2.12 of the QtQuick.Window module, used to create window objects.

• import QtQuick.Controls 2.12: Imports version 2.12 of the QtQuick.Controls module, used to create user interface controls.

• Window {}: Define a window object, and set the properties and components of the window within the curly braces.

• id: window: Sets a unique identifier for the window object.

• visible: true: Set the window object to be visible.

• width: 600: Sets the width of the window to 600 units.

• height: 600: Sets the height of the window to 600 units.

• title: qsTr("QML study"): Set the title of the window to "QML study", and use the qsTr function for translation.

• Image {}: A picture object is defined, and the properties and components of the picture are set within the curly braces.

• id: root: Sets a unique identifier for the image object.

• source: "pic//C.png": Set the source of the picture as "pic//C.png".

• anchors.fill: parent: Set the image object to fill the parent container.

• property int padding: 10: An attribute variable padding is defined and its value is set to 10.

• property int duration: 3000: An attribute variable duration is defined and its value is set to 3000.

• property bool running: false: An attribute variable running is defined and its value is set to false.

• Image {}: Another picture object is defined inside the picture object, and its properties and components are set.

• id: box: Sets a unique identifier for the internal image object.

• x: root.padding: Set the x coordinate of the internal image object to the value of root.padding.

• y: (root.height - height) / 2: Set the y coordinate of the internal image object to a value of (root.height - height) / 2.

• source: "pic//5.jpg": Set the source of the internal picture as "pic//5.jpg".

• sourceSize: Qt.size(200,200): Set the display size of the internal image to 200x200 pixels.

• NumberAnimation on x {}: Creates a numerical animation of the x property, and sets the animated property and value within curly braces.

• to: root.width - box.width - root.padding: Set the target value of the animation to the value of (root.width - box.width - root.padding).

• duration: root.duration: Set the duration of the animation to the value of root.duration.

• running: root.running: Set the state of whether the animation is running to the value of root.running.

• RotationAnimation on rotation {}: Create a rotation animation for the rotation property, and set the properties and values ​​of the animation within the curly braces.

• to:360: Set the target value of the rotation animation to 360 degrees.

• duration: root.duration: Set the duration of the rotation animation to the value of root.duration.

• running: root.running: Set the status of whether the rotation animation is running to the value of root.running.

• MouseArea {}: Define a mouse region object, and set the properties and events of the region within the curly braces.

• anchors.fill: parent: Set the mouse area object to fill the parent container.

• onClicked: root.running = true: When the mouse area is clicked, set the root.running property to true.

• ClickableImageV2 {}: Defines a clickable image object, and sets the attributes and components of the image within curly braces.

• id: greenBox: Sets a unique identifier for clickable image objects.

• x: 40, y: root.height-height: Set the initial values ​​of the x and y coordinates of the clickable image object.

• source: "pic//1.jpg": Set the source of the clickable picture to "pic//1.jpg".

• text: qsTr("animation on property"): Set the text of the clickable image to "animation on property", and use the qsTr function for translation.

• NumberAnimation on y {}: Creates a numerical animation of the y property, and sets the animated property and value within curly braces.

• to: 40: Sets the animation's target value to 40.

• duration:3000: Sets the duration of the animation to 3000.

• running: root.running: Set the state of whether the animation is running to the value of root.running.

• Behavior on y {}: Use the Behavior element inside the clickable image object to control how the properties are animated.

• NumberAnimation { duration: 3000 }: The numerical animation of the attribute is set, and the duration of the animation is set to 3000.

• onClicked: y = 40 + Math.random() * (205-40): When the clickable image object is clicked, set the y property to a random value between 40 and 205.

• ClickableImageV2 {}: Define another clickable image object, and set the properties and components of the image within the curly braces.

• id: redBox: Sets a unique identifier for clickable image objects.

• x: root.width-width-40, y: root.height-height: Set the initial values ​​of the x and y coordinates of the clickable image object.

• source: "pic//3.jpg": Set the source of the clickable picture to "pic//3.jpg".

• onClicked: anim.start(): When the clickable image object is clicked, the anim animation is triggered to start playing.

• text: qsTr("standalone animation"): Set the text of the clickable image to "standalone animation", and use the qsTr function for translation.

• NumberAnimation {}: Defines a numerical animation to control the numerical change of the attribute.

• target: redBox: The target object of the animation is redBox, that is, the object whose properties are to be changed.

• properties: "y": Set the property to be changed by animation as y.

• to: 40: Sets the animation's target value to 40.

• duration: 3000: Sets the duration of the animation to 3000.

Source sub-file (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()
    }
}

explain grammar

• import QtQuick 2.0: Imports version 2.0 of the QtQuick module, used to create user interfaces for Qt Quick applications.

• Item {}: Defines a clickable item, and sets the properties and components of the item within the curly braces.

• id:root: Sets a unique identifier for the item.

• width: column.childrenRect.width: Set the width of the item to the width of the column (Column) sub-element.

• height: column.childrenRect.height: Set the height of the item to the height of the column (Column) sub-element.

• property alias text: label.text: Defines an attribute named text and associates it with the text attribute of label, allowing the attribute to be accessed and modified externally.

• property alias source: image.source: Defines an attribute named source and associates it with the source attribute of image, allowing external access and modification of the attribute.

• signal clicked: Declare a clicked signal, indicating the event that the item is clicked.

• Column {}: defines a column (Column), used to organize the vertical arrangement of sub-elements.

• id:column: Sets a unique identifier for the column.

• spacing: 10: Sets the spacing between child elements in the column to 10 units.

• Image {}: A picture object is defined, and the properties and components of the picture are set within the curly braces.

• id: image: Sets a unique identifier for the image object.

• sourceSize: Qt.size(90,90): Set the display size of the image to 90x90 pixels.

• Text {}: Define a text object, and set the properties and components of the text within the curly braces.

• id: label: Sets a unique identifier for the text object.

• width: image.width: Set the width of the text to be the same as the width of the image.

• horizontalAlignment: Text.AlignHCenter: Set the horizontal alignment of the text to center alignment.

• wrapMode: Text.WordWrap: Set the line wrapping mode of the text to automatic line wrapping.

• color: "#000000": Set the color of the text to black.

• MouseArea {}: Define a mouse region object, and set the properties and events of the region within the curly braces.

• anchors.fill: parent: Set the size of the mouse area to be the same as the parent element (Item), filling the entire area.

• onClicked: root.clicked(): When the mouse area is clicked, the clicked signal of the item is triggered.