Qt Quick 范例 - 触发开关 ¶

Switch.qml ¶

import QtQuick 2.0
Item {
    id: toggleswitch
    width: background.width; height: background.height
    property bool on: false
    function toggle() {
        if (toggleswitch.state == "on")
            toggleswitch.state = "off";
        else
            toggleswitch.state = "on";
    }
    function releaseSwitch() {
        if (knob.x == 1) {
            if (toggleswitch.state == "off") return;
        }
        if (knob.x == 78) {
            if (toggleswitch.state == "on") return;
        }
        toggle();
    }
    Image {
        id: background
        source: "background.png"
        MouseArea { anchors.fill: parent; onClicked: toggle() }
    }
    Image {
        id: knob
        x: 1; y: 2
        source: "knob.png"
        MouseArea {
            anchors.fill: parent
            drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78
            onClicked: toggle()
            onReleased: releaseSwitch()
        }
    }
    states: [
        State {
            name: "on"
            PropertyChanges { target: knob; x: 78 }
            PropertyChanges { target: toggleswitch; on: true }
        },
        State {
            name: "off"
            PropertyChanges { target: knob; x: 1 }
            PropertyChanges { target: toggleswitch; on: false }
        }
    ]
    transitions: Transition {
        NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
    }
}
											

Walkthrough ¶

接口 ¶

property bool on: false
											

This property is the interface of the switch. By default, the switch is off and this property is false . It can be used to activate/deactivate the switch or to query its current state.

In this example:

the text will only be visible when the switch is on.

图像和用户交互 ¶

Image {
    id: background
    source: "background.png"
    MouseArea { anchors.fill: parent; onClicked: toggle() }
}
											

First, we create the background image of the switch. In order for the switch to toggle when the user clicks on the background, we add a MouseArea as a child item of the image. A MouseArea has a onClicked property that is triggered when the item is clicked. For the moment we will just call a toggle() function. We will see what this function does in a moment.

Image {
    id: knob
    x: 1; y: 2
    source: "knob.png"
    MouseArea {
        anchors.fill: parent
        drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78
        onClicked: toggle()
        onReleased: releaseSwitch()
    }
}
											

Then, we place the image of the knob on top of the background. The interaction here is a little more complex. We want the knob to move with the finger when it is clicked. That is what the drag 特性为 MouseArea is for. We also want to toggle the switch if the knob is released between state. We handle this case in the dorelease() function that is called in the onReleased 特性。

状态 ¶

states: [
    State {
        name: "on"
        PropertyChanges { target: knob; x: 78 }
        PropertyChanges { target: toggleswitch; on: true }
    },
    State {
        name: "off"
        PropertyChanges { target: knob; x: 1 }
        PropertyChanges { target: toggleswitch; on: false }
    }
]
											

定义开关的 2 种状态：

• 在 on state the knob is on the right ( x position is 78) and the on 特性为 true .

• 在 off state the knob is on the left ( x position is 1) and the on 特性为 false .

有关状态的更多信息，见 Qt Quick 状态 .

函数 ¶

为开关添加 2 个 JavaScript 函数：

function toggle() {
    if (toggleswitch.state == "on")
        toggleswitch.state = "off";
    else
        toggleswitch.state = "on";
}
											

This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two states ( on and off ).

function releaseSwitch() {
    if (knob.x == 1) {
        if (toggleswitch.state == "off") return;
    }
    if (knob.x == 78) {
        if (toggleswitch.state == "on") return;
    }
    toggle();
}
											

This second function is called when the knob is released and we want to make sure that the knob does not end up between states (neither on nor off ). If it is the case call the toggle() function otherwise we do nothing.

有关脚本的更多信息，见 在 QML 文档中的 JavaScript 表达式 .

Transition ¶

transitions: Transition {
    NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
}
											

At this point, when the switch toggles between the two states the knob will instantly change its x position between 1 and 78. In order for the knob to move smoothly we add a transition that will animate the x property with an easing curve for a duration of 200ms.

有关过渡的更多信息，见 Qt Quick 中的动画和过渡 .

用法 ¶

可以在 QML 文件中使用开关，像这样：

Switch { anchors.centerIn: parent; on: false }