QML-定时器

定时器

例子

Text {
    id: time
    width: 200
    height: 50
    color: "red"
    font.pixelSize: 26
}
Timer {
    interval: 50
    running: true
    repeat: true
    onTriggered: time.text = Date().toString()
}

定时50ms在text中显示当前时间

##练习题

Rectangle {
    id: lights
    anchors.top: time.bottom
    width: 110
    height: 320
    color: "black"

    Column {
        id: lightCol
        width: parent.width
        height: parent.height
        spacing: 5

        Rectangle {
            id: redlight
            x: 5
            y: 5
            width: 100
            height: 100
            radius: 100
            focus: true
            color: focus ? "red" : "gray"
        }
        Rectangle {
            id: yellowlight
            x: 5
            y: 110
            width: 100
            height: 100
            radius: 100
            color: focus ? "yellow" : "gray"
        }
        Rectangle {
            id: greenlight
            x: 5
            y: 215
            width: 100
            height: 100
            radius: 100
            color: focus ? "green" : "gray"
        }
    }
    states: [
        State {
            name: "redlightSta"
            PropertyChanges {
                target: redlight
                opacity: 1
                color: "red"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                opacity: 0
                color: "gray"
            }
        },
        State {
            name: "yellowlightSta"
            PropertyChanges {
                target: redlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 1
                color: "yellow"
            }
            PropertyChanges {
                target: greenlight
                opacity: 0
                color: "green"
            }
        },
        State {
            name: "greenlightSta"
            PropertyChanges {
                target: redlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                opacity: 0
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                opacity: 1
                color: "green"
            }
        }
    ]
    transitions: [
        Transition {
            from: "redlightSta"
            to: "yellowlightSta"
            PropertyAnimation {
                target: redlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "yellowlightSta"
            to: "greenlightSta"
            PropertyAnimation {
                target: yellowlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "greenlightSta"
            to: "redlightSta"
            PropertyAnimation {
                target: greenlight
                properties: "color"
                duration: 2000
            }
        }
    ]
}

Timer {
    interval: 5000
    running: true
    repeat: true
    onTriggered: {
        if(redlight.focus === true) {
            redlight.focus = false;
            yellowlight.focus = true;
            greenlight.focus = false;
            redlight.state = "yellowlightSta";
        }else if(yellowlight.focus === true) {
            redlight.focus = false;
            yellowlight.focus = false;
            greenlight.focus = true;
            redlight.state = "greenlightSta";
        }else if(greenlight.focus === true) {
            redlight.focus = true;
            yellowlight.focus = false;
            greenlight.focus = false;
            redlight.state = "redlightSta";
        }
    }
}

改善交通灯的过渡效果

Rectangle {
    id: lights
    anchors.top: time.bottom
    width: 110
    height: 320
    color: "black"

    Column {
        id: lightCol
        width: parent.width
        height: parent.height
        spacing: 5

        Rectangle {
            id: redlight
            x: 5
            y: 5
            width: 100
            height: 100
            radius: 100
            focus: true
            color: "red"
        }
        Rectangle {
            id: yellowlight
            x: 5
            y: 110
            width: 100
            height: 100
            radius: 100
            color: focus ? "yellow" : "gray"
        }
        Rectangle {
            id: greenlight
            x: 5
            y: 215
            width: 100
            height: 100
            radius: 100
            color: focus ? "green" : "gray"
        }
    }
    states: [
        State {
            name: "redlightSta"
            PropertyChanges {
                target: redlight
                color: "red"
                focus: true
            }
            PropertyChanges {
                target: yellowlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                focus: false
                color: "gray"
            }
        },
        State {
            name: "yellowlightSta"
            PropertyChanges {
                target: redlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                focus: true
                color: "yellow"
            }
            PropertyChanges {
                target: greenlight
                focus: false
                color: "gray"
            }
        },
        State {
            name: "greenlightSta"
            PropertyChanges {
                target: redlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: yellowlight
                focus: false
                color: "gray"
            }
            PropertyChanges {
                target: greenlight
                focus: true
                color: "green"
            }
        }
    ]
    transitions: [
        Transition {
            from: "redlightSta"
            to: "yellowlightSta"
            PropertyAnimation {
                target: redlight
                properties: "color"
                duration: 5000
            }
        },
        Transition {
            from: "yellowlightSta"
            to: "greenlightSta"
            PropertyAnimation {
                target: yellowlight
                properties: "color"
                duration: 2000
            }
        },
        Transition {
            from: "greenlightSta"
            to: "redlightSta"
            PropertyAnimation {
                target: greenlight
                properties: "color"
                duration: 3000
            }
        }
    ]
    Timer {
        interval: 2000
        running: true
        repeat: true
        onTriggered: {
            if(redlight.focus) {
                parent.state = "yellowlightSta";
            }else if(yellowlight.focus) {
                parent.state = "greenlightSta";
            }else if(greenlight.focus) {
                parent.state = "redlightSta";
            }
        }
    }
}

效果图如下：