Qt QML状态states的使用

效果

状态绿灯黄灯红灯
go
wait
stop

鼠标点击之后,依次在这三个状态循环,类似状态机原理。
在这里插入图片描述

代码

当状态改变时,去改变元素的属性。

import QtQuick 2.12
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

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

    ColumnLayout {
        id: col
        spacing: 20
        //        anchors.fill: parent
        anchors.centerIn: parent

        Rectangle {
            id: rec_green
            width: 50
            height: 50
            radius: width/2
            color: "green"
            border.color: Qt.darker(color)
        }
        Rectangle {
            id: rec_yellow
            width: 50
            height: 50
            radius: width/2
            color: "yellow"
            border.color: Qt.darker(color)
        }
        Rectangle {
            id: rec_red
            width: 50
            height: 50
            x: 100
            y: 100
            radius: width/2
            color: "red"
            border.color: Qt.darker(color)
        }
        //初始状态
        state: "go"

        //状态列表及执行的动作
        states: [
            State {
                name: "go"
                PropertyChanges {
                    target: rec_green
                    color: "green"
                }
                PropertyChanges {
                    target: rec_yellow
                    color: "black"
                }
                PropertyChanges {
                    target: rec_red
                    color: "black"
                }
            },
            State {
                name: "wait"
                PropertyChanges {
                    target: rec_green
                    color: "green"
                }
                PropertyChanges {
                    target: rec_yellow
                    color: "yellow"
                }
                PropertyChanges {
                    target: rec_red
                    color: "black"
                }
            },
            State {
                name: "stop"
                PropertyChanges {
                    target: rec_green
                    color: "black"
                }
                PropertyChanges {
                    target: rec_yellow
                    color: "black"
                }
                PropertyChanges {
                    target: rec_red
                    color: "red"
                }
            }
        ]
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            switch (col.state)
            {
            //状态跳转
            case "go":
                col.state = "wait";
                break;
            case "wait":
                col.state = "stop";
                break;
            case "stop":
                col.state = "go";
                break;
            default: break;
            }
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

whik1194

如果对你有帮助,欢迎打赏。谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值