先说说我的需求,最近在做音乐播放器的时候用到了Slider来显示播放进度,因为播放过程中有可能需要拖动或点击进度条的某处来实现快进/快退,系统提供的有点丑了...而且发现用系统提供的Style来自定义特别麻烦,所以自己直接写一个。
先放个图:
再说说我的思路:
把这个滑动条分为三个部分:背景部分、滑块部分、已加载部分
咱们自定义三个Rectangle,分别来表示这三个部分,这样以后我们就可以随意自定义图片或者样式来改变这个滑动条的样式啦。
思路清晰了,开始上代码:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
Window {
visible: true
width: 480
height: 100
color: "black"
title: qsTr("自定义进度条")
//记录滑块在进度条中的位置(百分比)
property double position: sliderRect.x / processBar.width
//当移动滑块时产生此信号
signal moved()
//自定义进度条
Rectangle{
id: processBar
width: 400
height: 5
radius: 2.5
color: "#10191c"
anchors.centerIn: parent
//点击进度条时实现快速快进快退
MouseArea{
anchors.fill: parent
onClicked: {
sliderRect.x = mouseX
//产生信号
moved(position)
}
}
//可滑动的滑块
Rectangle{
id: sliderRect
width: 2
height: parent.height + 4
radius: 1
color: "#9affff"
anchors.verticalCenter: parent.verticalCenter
x: 0
//实现鼠标点击滑块时的滑动事件
MouseArea{
anchors.fill: parent
onMouseXChanged: {
sliderRect.x += mouseX
//限制滑块不能超出父控件的边界
if(sliderRect.x < 0)
sliderRect.x = 0
if(sliderRect.x > (processBar.width - sliderRect.radius))
sliderRect.x = processBar.width - sliderRect.radius
//设置已加载部分的颜色
processBarDone.width = sliderRect.x
//产生信号
moved(position)
}
}
}
//已加载部分
Rectangle{
id: processBarDone
width: 0
height: parent.height
radius: parent.radius
color: "#4efdef"
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
}
}
}
代码不够完美,自己用的时候要适当修改哦。
本文原创,转载请注明出处,谢谢~