qml组件学习-state的使用

最新推荐文章于 2025-06-14 14:52:00 发布

原创最新推荐文章于 2025-06-14 14:52:00 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #qt5

Qt与QML 专栏收录该内容

27 篇文章

订阅专栏

这篇博客展示了如何利用Qt的QML模块，通过定义状态和定时器来实现一个矩形组件每0.5秒自动切换颜色，从红色到蓝色的动态效果。这个例子深入浅出地解释了QtQuick中组件状态管理和定时器的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

state：可以保存一个组件的各种状态
演示代码：

import QtQuick 2.15
import QtQuick.Window 2.15

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


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

        states: [
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red" }
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue" }
            }
        ]
    }

    Component.onCompleted: {
        root.state = "red_color"
    }

    Timer{  //定时器的使用
    interval: 500; running: true; repeat: true
    onTriggered: {
        var red = "red_color"
        var blue = "blue_color"
        if(root.state === red) root.state = blue
        else root.state = red
    }
    }

}