QML学习04（states、transitions）

1、前言

记录一下QML学习的过程，方便自己日后回顾，也可以给有需要的人提供帮助。

2、states

这是一个状态，可以通过状态中的属性来改变控件状态

    Rectangle {
        id: root
        width: 100; height: 100

        //state显示不同颜色
        state: "normal"

        //状态
        states: [
            State {
                name: "normal"
                PropertyChanges { target: root; color: "black" }
            },

            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red";width:200}
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue";height:100 }
            }
        ]

        MouseArea{
            anchors.fill: parent
            onPressed: {
                root.state = "red_color"
            }

            onReleased: {
                root.state = "blue_color"
            }

        }
    }

3、transitions

制作颜色改变、宽度改变动画效果

        //属性
        //duration：时间
        PropertyAnimation {id: animateColor;
            target: flashingblob;
            properties: "color";
            to: "green";
            duration: 1000}

        //数值，颜色改变
        NumberAnimation {
            id: animateOpacity
            target: flashingblob
            properties: "opacity"
            from: 0.2
            to: 1.0
            duration: 2000
       }

        //改变宽度
        NumberAnimation {
            id: animateWidth
            target: flashingblob
            properties: "width"
            from: 75
            to: 150
            duration: 2000
       }

    }

坐标改变、动画

Rectangle {
     id: rect
     width: 100; height: 100
     color: "red"
     
     PropertyAnimation on x {   //修改当前控件位置
         to: 100
     duration: 1000
     }
     PropertyAnimation on y {
         to: 100
     duration: 1000
     }

     PropertyAnimation on width {
         to: 300
     duration: 2000
     }
 }

特殊的Animation

Rectangle {
id: rect
width: 100; height: 100
color: "red"


PropertyAnimation on x {   //修改当前控件位置
    to: 100
duration: 1000
}
PropertyAnimation on y {
    to: 100
duration: 1000
}

PropertyAnimation on width {
    to: 300
duration: 2000
}

//颜色改变
ColorAnimation on color{
    from: "blue"
    to: "yellow"
    duration: 200
}

//顺序结构,先黄色再蓝色
SequentialAnimation on color {
    ColorAnimation{to: "yellow"; duration: 1000}
    ColorAnimation{to: "blue"; duration: 1000}
}

4、总结

以上就是C++的一些基础知识了，浏览过程中，如若发现错误，欢迎大家指正，有问题的欢迎评论区留言或者私信。最后，如果大家觉得有所帮助，可以点一下赞，谢谢大家！祝大家天天开心，顺遂无虞！