一、效果预览
二、介绍:
自定义的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
}