7.自定义渐变椭圆形进度条

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
    }
}

持续更新中，请大家多多关注…