examples/declarative/slideswitch/Switch.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

Item {
    id: Switch
    width: Groove.width
    height: Groove.height
    properties: Property {
        name: "on"
    }
    Script {

        function toggle() {
            if(Switch.state == "On")
                Switch.state = "Off";
            else
                Switch.state = "On";
        }
        function dorelease() {
            print(Knob.x);
            if(Knob.x == 1) {
                if(Switch.state == "Off") 
                    return;
            }

            if(Knob.x == 78) {
                if(Switch.state == "On") 
                    return;
            }

            toggle();
        }
    
    }
    Image {
        id: Groove
        source: "background.svg"
    }
    MouseRegion {
        anchors.fill: Groove
        onClicked: { toggle() }
    }
    Image {
        id: Knob
        source: "knob.svg"
        x: 1
        y: 2
    }
    MouseRegion {
        anchors.fill: Knob
        onClicked: { toggle() }
        onReleased: { if (!isClick) dorelease() }
        drag.target: Knob
        drag.axis: "x"
        drag.xmin: 1
        drag.xmax: 78
    }
    states: [
        State {
            name: "On"
            SetProperty {
                target: Knob
                property: "x"
                value: 78
            }
            SetProperty {
                target: Switch
                property: "on"
                value: true
            }
        },
        State {
            name: "Off"
            SetProperty {
                target: Knob
                property: "x"
                value: 1
            }
            SetProperty {
                target: Switch
                property: "on"
                value: false
            }
        }
    ]
    transitions: [
        Transition {
            NumericAnimation {
                properties: "x"
                easing: "easeInOutQuad"
                duration: 200
            }
        }
    ]
}