1. 说明：
本篇文章代码设计了一种可以实现渐变色的进度条，目前能够实现横向的进度条，纵向的进度条通过调整rotation属性，旋转一定的角度也能够实现，不过布局会有一点问题，后期在解决吧。
效果展示：
自制彩色进度条
2. 整体代码：
import QtQuick 2.15
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0
Slider{
id: slider
property int curTimeValue: 25//当前值
property int totalTimeValue: 100//总值
implicitWidth: 400;//未指定宽度时的默认宽度
implicitHeight: width/20 - 4;//未指定高度时的默认高度
orientation:Qt.Horizontal
from: 0
value: curTimeValue
to:totalTimeValue
stepSize: 1//指定步长
background: Rectangle {
//定义整体滑动条的背景样式
id:bg
implicitWidth: slider.implicitWidth
implicitHeight: slider.implicitHeight
color: "#2D363F"
radius: slider.width/20 - 4
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: bg.width
height: bg.height
radius: bg.radius
}
}
//定义小球滑过后背景渐变样式
Rectangle {
id:gradientBG
y: slider.horizontal ? 0 : slider.visualPosition * parent.height
width: slider.horizontal ? slider.position * parent.width : parent.width
height: slider.horizontal ? parent.height : slider.position * parent.height
opacity: 1
radius:slider.width/20 - 4
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(parent.width, 0)
gradient: Gradient {
GradientStop {
position: 0.0; color: "#ff1493" }
GradientStop {
position: 1.0; color: "#8a2be2" }
}
}
}
}
//设计滑动小圆球样式
handle: Item {
id:sliderBall
x:(slider.horizontal ? slider.visualPosition * (slider.width - sliderBall.width) : (slider.width - sliderBall.width) / 2)
anchors.verticalCenter: parent.verticalCenter
implicitWidth: slider.width/20 + 6
implicitHeight: slider.width/20 + 6
Rectangle{
anchors.fill: parent
radius: width/2
color:"#ffffff"
}
}
Text{
id:curValue
x:sliderBall.x
y:curValue.rotation ===0 ? sliderBall.y + 25 : sliderBall.y + 35
anchors.horizontalCenter: sliderBall.horizontalCenter
rotation: -slider.rotation
text: slider.value + "%"
font.pixelSize: slider.width/10 - 10
color: slider.value > slider.totalTimeValue * 0.9 ? "red" : "black"
}
}
3. 使用：
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
//import QtQuick3D 1.15
Window {
id:root
objectName: "mainWindow"
width: 640
height: 480
visible: true
title: qsTr("Hello Signal")
SelfSlider{
width: 400
rotation: -90
anchors.right: parent.right
anchors.rightMargin: -100
anchors.verticalCenter: parent.verticalCenter
}
SelfSlider{
width: 400
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
}
}