QML自定义Slider

先说说我的需求，最近在做音乐播放器的时候用到了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
        }
    }
}

 

代码不够完美，自己用的时候要适当修改哦。

本文原创，转载请注明出处，谢谢~