Qml的Slider控件示例

发表于

通过自定义样式美化Slider

  • 起始值0处标识同心圆;
  • 拖动动画变化颜色;
  • 气泡显示数值.

SliderSample

示例源码

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
import QtQuick 2.0
import "../" as My

Rectangle {
    width: 320; height: 240

    Row {
        anchors.centerIn: parent
        spacing: 20

        Column {
            spacing: 50
            /* handle is rectangle */

            Repeater {

                model: ["red", "blue", "green"]

                My.Slider {
                    id: slider
                    to: 100

                    handle: Item {
                        width: 14
                        height: width

                        Rectangle {
                            width: 14
                            height: width
                            radius: width/2
                            color: slider.position === 0 ? "#d5d5d5" : modelData
                            anchors.verticalCenter: parent.verticalCenter

                            NumberAnimation on width { running: slider.pressed; from: 14; to: 20; duration: 100 }
                            NumberAnimation on width { running: !slider.pressed; from: 20; to: 14; duration: 100 }

                            Rectangle {
                                anchors.centerIn: parent
                                width: 10; height: width
                                radius: width/2
                                visible: slider.position === 0
                                color: "white"

                                NumberAnimation on width { running: slider.pressed; from: 10; to: 14; duration: 100 }
                                NumberAnimation on width { running: !slider.pressed; from: 14; to: 10; duration: 100 }
                            }

                            Image {
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.bottom: parent.top
                                width: 0; height: width
                                smooth: true
                                source: "./" + modelData + "_64_64.svg"

                                NumberAnimation on width { running: slider.pressed; from: 0; to: 48; duration: 100 }
                                NumberAnimation on width { running: !slider.pressed; from: 48; to: 0; duration: 100 }

                                Text {
                                    visible: slider.pressed
                                    anchors.centerIn: parent
                                    color: "white"
                                    text: parseInt(slider.position * slider.to)
                                }
                            }
                        }
                    }

                    background: Rectangle {
                        width: 200
                        height: 2
                        radius: 2
                        color: "#d5d5d5"

                        /* available rectangle */
                        Rectangle {
                            width:  slider.position*parent.width
                            height: parent.height
                            radius: parent.radius
                            color: modelData
                        }
                    }
                }
            }
        }
    }
}

源码地址

1
https://github.com/QtComponent/Slider.git