034-第三代软件开发-自定义Slider(一)

第三代软件开发-自定义Slider(一)

关键字： Qt、 Qml、 Slider、 position、 关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目！这个项目结合了 QML（Qt Meta-Object Language）和 C++ 的强大功能，旨在开发出色的用户界面和高性能的后端逻辑。

在项目中，我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件，我们能够迅速开发出丰富多样的界面效果和动画效果。同时，我们利用 QML 强大的集成能力，轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面，我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言，能够提供卓越的性能和可扩展性。我们的团队致力于优化代码，减少资源消耗，以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣，还是需要我们为您构建复杂的用户界面和后端逻辑，我们都随时准备为您提供支持。请随时联系我们，让我们一同打造现代化、高性能的 QML & C++ 项目！

重要说明☝

☀该专栏在第三代软开发更新完将涨价

自定义Slider(一)

这部分代码是由我们的小伙伴开发，这里做一下分享，按照我的习惯我肯定是不会自己写一个的，我会去该Qt自带Slider 得样式，不过看代码，我们的小伙伴是自己实现了一个。后面我在写简单的视频播放器的时候，会有自定义Slider(二出现)。

小伙伴博客ID：https://blog.csdn.net/weixin_44641897?type=blog

​

import QtQuick 2.0
Item {
    id: root
    // 游标所在位置
    property int position: 5
    // 最多有多少刻度
    property int maxSchedule: 11
    // 显示字符串位置 -1左 0无 1右
    property int textLocation: 0
    // 字符串所占位置宽度  为 小于等于 0值 表示没有
    property int textWidth: 150
    // 字符穿内容 长度应该为刻度值+1
    property var textData: []
    // 刻度间隔
    property real spac: 4
    // 刻度条宽度(不含间隔）
    property int barWidth: 20
    // 刻度条宽度
    property int barWidthContain: barWidth + spac


    width: textLocation == 0 ? processBar.width+40 : processBar.width + textWidth +40
    height: 60

    Component.onCompleted: {
        //        console.log(textData.length)
    }

    // 背景图
    Image {
        id: backSlider
        source: textLocation == -1 ? "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg_time.png" : "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg.png"
        anchors.centerIn: parent

        width: textLocation == 0 ? processBar.width+40 : processBar.width + textWidth +40

        //        anchors.margins: 20


        // 游标刻度显示
        Text {
            id: sliderText
            // 防止提供刻度值不够
            text: textData.length > position ? textData[position] : "null"

            width: textWidth
            height: 20

            visible: textLocation == 0 || textWidth == 0 ? false : true

            color: "#D8D8D8"

            x: textLocation == -1 ? 20 : textLocation == 1 ? backSlider.width - textWidth  : 0
            y: backSlider.height / 2 - height / 2

        }

        // 进度条
        Image {
            id: processBar

            width: 8 + maxSchedule * barWidthContain

            height: 10

            x: textLocation == 1 ? 20 : textLocation == -1 ? backSlider.width - processBar.width-20  : 20
            y: backSlider.height / 2 - height / 2


            source: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/slider_bar.png"



            // 刻度
            ListView {
                id:list

                spacing:spac
                orientation: ListView.Horizontal
                width: processBar.width
                height: 10

                x: spac



                model: maxSchedule

                interactive: false

                delegate: Rectangle{
                    width: barWidth
                    height: 4
                    y: processBar.height / 2 - height / 2
                    color: index < position ? "#00B1FF" : "#53555C"
                }

                //点击进度条时实现快速快进快退
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        position = (mouseX+barWidthContain/2)/barWidthContain
                        for(var i=1;ibarWidth+sliderRect.width/2)
                            {
                                if(position < maxSchedule)
                                {
                                    list.currentIndex = position   //点击选中哪一项
                                    list.currentItem.color = "#00B1FF"
                                    position++

                                }
                            }
                            if(mouseX<0)
                            {
                                if(position > 1)
                                {
                                    list.currentIndex = position-1   //点击选中哪一项
                                    list.currentItem.color = "#53555C"
                                    position--
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

使用法子：

Turing_Slider{
    id:slider_voltage
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    visible: false
    position: UserProfile.voltageRange
    maxSchedule: 13
    textLocation: 1
    textWidth: 80
    textData: ["","20uV","50uV","100uV","200uV","500uV","1KuV","2KuV","5KuV","1WuV","2WuV","5WuV","10WuV","自适应"]
    onPositionChanged: {
        UserProfile.voltageRange = position;
        switch (position){
        case 1:set_voltageRange(20);playSound.play();break
        case 2:set_voltageRange(50);playSound.play();break
        case 3:set_voltageRange(100);playSound.play();break
        case 4:set_voltageRange(200);playSound.play();break
        case 5:set_voltageRange(500);playSound.play();break
        case 6:set_voltageRange(1000);playSound.play();break
        case 7:set_voltageRange(2000);playSound.play();break
        case 8:set_voltageRange(5000);playSound.play();break
        case 9:set_voltageRange(10000);playSound.play();break
        case 10:set_voltageRange(20000);playSound.play();break
        case 11:set_voltageRange(50000);playSound.play();break
        case 12:set_voltageRange(100000);playSound.play();break
        case 13:set_voltageRange(0);playSound.play();break
        }
    }
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

总结一下

这个Slider意义在于提供一个思路，而复用性应该没有太多，包括我们项目中，也没法复用，可以说是专门为了某一个功能定制的。参考参考

---