SCXML Traffic Light (Dynamic, QML)

A Qt Quick application that uses a dynamically loaded state machine to implement a traffic light.

Traffic Light QML demonstrates how to connect to the active properties of a state in a dynamically loaded state machine.

UI 是使用 Qt Quick 创建的。

运行范例

要运行范例从 Qt Creator ，打开 Welcome 模式，然后选择范例从 Examples 。更多信息，拜访 构建和运行范例 .

动态加载状态机

We link against the Qt SCXML module by adding the following lines to the example's build files.

To .pro when using qmake:

QT += qml scxml
					

To CMakeLists.txt when using cmake:

find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Scxml)
target_link_libraries(trafficlight-qml-dynamic PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Qml
    Qt6::Scxml
)
					

We dynamically create the state machine in the main QML file:

import QtScxml
import TrafficLightApplication
Window {
    width: lights.width
    height: lights.height
    visible: true
    Lights {
        id: lights
        stateMachine: loader.stateMachine
        // Suppress qmllint warning, dynamic statemachine properties not known at compile-time
        // qmllint disable missing-property
        button.source: stateMachine.working ? "pause.png" : "play.png"
        button.onClicked: stateMachine.submitEvent(stateMachine.working ? "smash" : "repair");
        // qmllint enable missing-property
    }
    StateMachineLoader {
        id: loader
        source: Qt.resolvedUrl("statemachine.scxml")
    }
}
					

连接到状态

In the SCXML file, we specify states for each light: red, yellow, and green. In the <onentry> element, we specify the event to send when entering the state and the delay in seconds before sending the event. In the <transition> element, we specify the event that triggers the transition to the state specified by the target 属性：

        <state id="red">
            <onentry>
                <send event="startGoingGreen" delay="3s"/>
            </onentry>
            <transition event="startGoingGreen" target="redGoingGreen"/>
        </state>
        <state id="yellow" initial="greenGoingRed">
            <state id="redGoingGreen">
                <onentry>
                    <send event="goGreen" delay="1s"/>
                </onentry>
                <transition event="goGreen" target="green"/>
            </state>
            <state id="greenGoingRed">
                <onentry>
                    <send event="goRed" delay="1s"/>
                </onentry>
                <transition event="goRed" target="red"/>
            </state>
        </state>
        <state id="green">
            <onentry>
                <send event="startGoingRed" delay="3s"/>
            </onentry>
            <transition event="startGoingRed" target="greenGoingRed"/>
        </state>
					

We connect to the states as follows:

    states: [
        // Suppress qmllint warning, dynamic statemachine properties not known at compile-time
        // qmllint disable missing-property
        State {
            name: "Red"
            when: lights.stateMachine.red
            PropertyChanges { redLight.opacity: 1 }
        },
        State {
            name: "RedGoingGreen"
            when: lights.stateMachine.redGoingGreen
            PropertyChanges { redLight.opacity: 1 }
            PropertyChanges { yellowLight.opacity: 1 }
        },
        State {
            name: "Yellow"
            when: lights.stateMachine.yellow || lights.stateMachine.blinking
            PropertyChanges { yellowLight.opacity: 1 }
        },
        State {
            name: "Green"
            when: lights.stateMachine.green
            PropertyChanges { greenLight.opacity: 1 }
        }
        // qmllint enable missing-property
    ]
					

范例工程 @ code.qt.io

内容

• 运行范例

• 动态加载状态机

• 连接到状态