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
}