第三代软件开发-自定义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
qml
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;i<maxSchedule;i++)
{
if(i < position)
{
list.currentIndex = i //点击选中哪一项
list.currentItem.color = "#00B1FF"
}
else
{
list.currentIndex = i //点击选中哪一项
list.currentItem.color = "#53555C"
}
}
}
}
// 游标
Image {
id: sliderRect
source: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/pointer.png"
x: position==0 ? 0-sliderRect.width/2 : position*barWidthContain - spac -sliderRect.width/2
y: list.height / 2 - height / 2 +2
MouseArea{
anchors.fill: parent
onMouseXChanged: {
if(mouseX>barWidth+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--
}
}
}
}
}
}
}
}
}使用法子：
qml
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
}
}总结一下
这个Slider意义在于提供一个思路，而复用性应该没有太多，包括我们项目中，也没法复用，可以说是专门为了某一个功能定制的。参考参考
