一、效果预览

二、介绍：

自定义的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: 100width: widthValueheight: 20radius: height / 2color: "lightgray"Rectangle {id: progressRectheight: parent.heightanchors.left: parent.leftwidth: progressWidthradius: height / 2// 使用渐变颜色gradient: Gradient {id: progressGradientGradientStop { position: 0.0; color: "#8DE7F1" }GradientStop { position: 1.0; color: "#3FA6D9" }}Behavior on x {NumberAnimation { duration: 100 }}}Material.theme: Material.DarkMouseArea {id: mouseAreaanchors.fill: parentonPressed: {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.xupdateGradientStops(progressRect.width / parent.width)}}}}function updateGradientStops(progress) {progressGradient.stops[1].position = progress}property alias progressWidth: progressRect.width
}