QML 自定义进度条组件开发

一、效果预览

二、介绍：

自定义的QML 屏幕亮度拖动进度条组件CusProgressBar 可跟鼠标移动 更改进度条样式

三、代码

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
 
/**
 *@author:Zwj
 *csdn:来份煎蛋吧
 *date:2023/12/16
 */
Rectangle {
    property int widthValue: 100
    width: widthValue
    height: 20
    radius: height / 2
    color: "lightgray"
 
    Rectangle {
        id: progressRect
        height: parent.height
        anchors.left: parent.left
        width: progressWidth
        radius: height / 2
 
        // 使用渐变颜色
        gradient: Gradient {
            id: progressGradient
            GradientStop { position: 0.0; color: "#8DE7F1" }
            GradientStop { position: 1.0; color: "#3FA6D9" }
        }
 
        Behavior on x {
            NumberAnimation { duration: 100 }
        }
 
    }
 
    Material.theme: Material.Dark
 
    MouseArea {
        id: mouseArea
        anchors.fill: parent
 
        onPressed: {
            if (mouse.button === Qt.LeftButton) {
                mouse.accepted = true
            }
        }
 
        onPositionChanged: {
            if (mouseArea.containsMouse && mouse.buttons === Qt.LeftButton) {
                var localMouse = mapToItem(progressRect, mouse.x, 0)
                if (localMouse.x >= 0 && localMouse.x <= parent.width) {
                    progressRect.width = localMouse.x
                    updateGradientStops(progressRect.width / parent.width)
                }
            }
        }
    }
 
    function updateGradientStops(progress) {
        progressGradient.stops[1].position = progress
    }
 
    property alias progressWidth: progressRect.width
}