1. Descripción:
El código de este artículo diseña una barra de progreso que puede realizar colores degradados. En la actualidad, la barra de progreso horizontal se puede realizar. La barra de progreso vertical también se puede realizar ajustando la propiedad de rotación y girando en un cierto ángulo. Sin embargo , habrá Habría algunos problemas con el diseño, luego resuélvelo.
Mostrar resultados:
Barra de progreso de color hecha en casa
2. Código general:
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. Uso:
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
}
}