功能:鼠标点住后上下拖动,实现进度条滑动,可以用于实现触摸屏幕上的亮度调节按钮或音量调节按钮。
实现思路
1、首先画一个矩形记为Rect1,设置颜色为白色,作为根矩形
2、画一个跟矩形Rect1大小一致的矩形Rect2,Rect2的透明度设置为透明,主要用于拖动
3、画一个Rect3跟Rect1大小一致,颜色为绿色,主要用来显示进度。
4、Rect2移动后的位置Rect2.y 跟当前的位置curY求差:dist = curY - Rect2.y, 有了dist后,可以计算Rect3的高度:Rect3.height = Rect3.height + dist,时时更新
5、松开鼠标后,Rect2必须恢复到原位置:Rect2.y = 0,以便于下次触摸计算。
详细的实现细节,请见代码注释
实现代码
SlideBar.qml
import QtQuick 2.5
Rectangle{
id:scrollbarRoot //矩形1,作背景
color: "white"
radius: 10
property int percent: 0
property int curY: 0 // 定义局部变量,存储上一次change时的y的值
Rectangle{
id: button // 矩形2 用于鼠标点击后滑动
anchors.left: parent.left // 千万不要设置anchors.fill, anchors.top, anchors.bottom,这样操作后无法上下滑动
width: parent.width // 宽度高度跟背景框保持一致
radius: parent.radius
height: parent.height
smooth: true
color:"black"
z:100 // z必须设置,这样保证该矩形位于最上方,用于点击滑动
opacity: 0
MouseArea {
id:ma
anchors.fill: button // 整个区域都可以点击滑动
drag.target: button
drag.axis: Drag.YAxis // 设置滑动轴为Y轴
drag.minimumY: -1 * scrollbarRoot.height // 滑动的最小值,即向上最多能滑动多大,这里设置的是一个height
drag.maximumY: scrollbarRoot.height // 滑动的最大值,即向下最多能滑动多大,这里设置的是一个height
onMouseYChanged:{ // 图像y坐标移动时响应处理
var tmp = (scrollbarRoot.curY - button.y) // 计算移动值
tmp += fillRect.height // 移动值加到滑动条的高度
if (tmp > scrollbarRoot.height) { // 滑动条高度的上下限设置 [0, height]
tmp = scrollbarRoot.height;
} else if (tmp < 0) {
tmp = 0;
}
console.log(tmp)
fillRect.height = tmp; // 真实高度设置
percent = fillRect.height / scrollbarRoot.height // 计算百分比
scrollbarRoot.curY = button.y // 更新当前y值
}
onReleased : { // 松开处理
scrollbarRoot.curY = 0; // 松开后,更新当前y值
button.y = 0; // 将滑动的矩形恢复到原位置,以便于下一次的点击滑动
}
}
}
Rectangle {
id: fillRect // 进度显示矩形,颜色为绿色
anchors.bottom: parent.bottom // 不要设置anchors.top,不然无法滑动
anchors.left: parent.left
width: parent.width
height: 0
radius: parent.radius
color: "green"
z:100
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
//import "./base/*.qml"
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
SlideBar {
id: slide
anchors.centerIn: parent
width: 100
height: 200
border.color: "black"
visible: true
}
}