使用QML实现播放器进度条效果

使用QML实现播放进度效果

QML Slider介绍

直接上DEMO如下：

        Slider {
            width: 300;
            height: 20;
            orientation: Qt.Vertical; //决定slider是横还是竖 默认是Horizontal
            stepSize: 0.1;
            value: 0.2;
            tickmarksEnabled: true; //显示刻度
        }

效果图如下

那么我先改变滑块跟滚轮那就需要SliderStyle了

SliderStyle

SliderStyle由四部分组成分别是面板（panel）、滑槽（groove）、刻度线（tickmarks）、滑块（handle）通常情况下我们只需要改动groove、handle就可以获取我们想要的效果

播放器进度条需求分析

1.滑块随播放进度而偏移
2.滑块滑动过的位置为已播放的内容，已播放内容对应的滑槽部分背景色应该不同
3.滑块可以定制化
4.slider应该随着播放器界面大小改变来改动

DEMO

1.先来看看滑块自定义

            handle: Rectangle {
                // 滑块
                implicitWidth: 16 // 滑块宽度，当没有定义width时生效
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray" //鼠标移动到滑块上边缘颜色改变
                border.color: "gray"
                border.width: 2
                width: 34
                height: 34
                radius: 12
                Text { //滑块中间显示value
                    anchors.centerIn: parent
                    text: control.value
                    color: "red"
                }
                AnimatedImage {  //加载git图片，此使滑块样式为加载图片样式
                    source: "huli.gif"
                    anchors.fill: parent
                    playing: true
                }
            }

2.滑槽自定义

            groove: Item {
                implicitWidth: 200
                implicitHeight: 8
                Rectangle {
                    id: grooveBackground
                    anchors.fill: parent
                    color: "gray"
                    radius: 8
                }
                // 该部分来实现已播放进度条背景色功能
                Rectangle {
                    id: highlight
                    height: parent.height
                    width: playerProcessBar.value / playerProcessBar.maximumValue
                           * playerProcessBar.width    
                    color: "green" // 高亮颜色
                    radius: 8
                }
            }
            ```