1. Description:
The code in this article designs a progress bar that can realize gradient colors. At present, the horizontal progress bar can be realized. The vertical progress bar can also be realized by adjusting the rotation attribute and rotating at a certain angle. However, there will be some problems with the layout. solve it.
Show results:
Homemade colored progress bar
2. Overall code:
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. Use:
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
}
}