Flat风格的Qml滑动条

╰+哭是因爲堅強的太久メ 2023-06-22 07:12 23阅读 0赞

> 基于Qml的Slider控件修改而成。

![demo.gif][]

## 滑动条代码 ##

import QtQuick 2.0
    import QtQuick.Controls 2.0
    import QtGraphicalEffects 1.0
    
    Slider { 
        id: root
    
        property color checkedColor: "#3498DB"
    
        value: 0.5
    
        background: Rectangle { 
            x: root.leftPadding
            y: root.topPadding + root.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 12
            width: root.availableWidth
            height: implicitHeight
            radius: height / 2
            color: "#EBEDEF"
    
            Rectangle { 
                width: root.visualPosition == 0 ? 0 : root.handle.x + root.handle.width / 2
                height: parent.height
                color: root.checkedColor
                radius: height / 2
    
    
                layer.enabled: root.hovered | root.pressed
                layer.effect: DropShadow { 
                    transparentBorder: true
                    color: root.checkedColor
                    samples: 8
                }
            }
        }
    
        handle: Rectangle { 
            x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
            y: root.topPadding + root.availableHeight / 2 - height / 2
            implicitWidth: root.background.implicitHeight + 6
            implicitHeight: implicitWidth
            radius: implicitWidth / 2
            color: root.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
    
            layer.enabled: root.hovered | root.pressed
            layer.effect: DropShadow { 
                transparentBorder: true
                color: root.checkedColor
                samples: 10 /*20*/
            }
        }
    }

## 滑动条样式代码 ##

![main\_page3.png][main_page3.png]

GridLayout { 
        width: root.width
        rows: 3
        columns: 3
    
        Repeater { 
            id: spinBoxRepeater
            model: ["#727CF5", "#0ACF97", "#F9375E",
                    "#FFBC00", "#2B99B9", "#5A6268",
                    "#EEF2F7", "#212730", "#3498DB"]
    
            Slider { 
                checkedColor: modelData
                value: Math.random()
            }
        }
    }

*  更多精彩内容请关注公众号**Qt君**。

[demo.gif]: https://img-blog.csdnimg.cn/20191214222420968.gif
[main_page3.png]: https://img-blog.csdnimg.cn/20191214222948816.png