QML QtQuick.Controls 2 ScrollBar滚动条样式自定义

版本：Qt5.12.5 ，参考Qt源码及文档示例

代码链接：https://github.com/gongjianbo/QmlComponentStyle.git  

自定义样式与默认样式的对比：

扁平样式实现代码：

（滚动条一般配合Flickable或ScrollView等类似控件使用，我唯一不爽的是如果policy不是设置为ScrollBar.AlwaysOn，默认的ScrollBar.AsNeeded会在滚动条活跃（滚动或鼠标在上面）时才会显示，这和widgets那种超出范围就显示不一样，于是我修改为了widgets那种模式）

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T

//qtquickcontrols2\src\imports\controls\ScrollBar.qml
//from Customizing ScrollBar
T.ScrollBar {
    id: control

    property color handleNormalColor: "darkCyan"  //按钮颜色
    property color handleHoverColor: Qt.lighter(handleNormalColor)
    property color handlePressColor: Qt.darker(handleNormalColor)

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 1 //背景整体size和handle的间隔
    visible: control.policy !== T.ScrollBar.AlwaysOff

    contentItem: Rectangle {
        implicitWidth: control.interactive ? 10 : 2
        implicitHeight: control.interactive ? 10 : 2

        radius: width / 2
        color: control.pressed
               ?handlePressColor
               :control.hovered
                 ?handleHoverColor
                 :handleNormalColor
        //修改为widgets那种alwayson/超出范围才显示的样子
        opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
        //默认行为ScrollBar.AsNeeded是鼠标放上去或者滚动滚轮才会出现滚动条
        //我把它改成了widgets那种超出范围就一直显示的样式
        //如果想用原本的样式，可以使用下面被注释的代码，它来自源码
        /*opacity: 0.0
        states: State {
            name: "active"
            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
            PropertyChanges { target: control.contentItem; opacity: 0.75 }
        }
        transitions: Transition {
            from: "active"
            SequentialAnimation {
                PauseAnimation { duration: 450 }
                NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; from:1.0; to: 0.0 }
            }
        }*/
    }
    //一般不需要背景
    /*background: Rectangle{
        implicitWidth: control.interactive ? 10 : 2
        implicitHeight: control.interactive ? 10 : 2
        color: "skyblue"
        //opacity: 0.3
    }*/
}

//main.qml
        
        Row{
            id:scrollbar_row
            spacing: 10

            //用ScrollView来展示ScrollBar
            ScrollView{
                id: scrollview_1
                width: 200
                height: 200
                contentWidth: 500
                //contentHeight: 500
                background: Rectangle{
                    border.color: "black"
                    border.width: 1
                }
                padding: 1
                ScrollBar.vertical: ScrollBar {
                    parent: scrollview_1
                    x: scrollview_1.mirrored ? 0 : scrollview_1.width - width
                    y: scrollview_1.topPadding
                    //可以判断下另一边的scrollbar，减去其高度避免重叠
                    height: scrollview_1.availableHeight
                    active: scrollview_1.ScrollBar.horizontal.active
                    policy: ScrollBar.AlwaysOn //默认asneeded需要操作时才显示
                    //默认是可以拖动来交互的
                    //interactive: true
                }

                ScrollBar.horizontal: ScrollBar {
                    parent: scrollview_1
                    x: scrollview_1.leftPadding
                    y: scrollview_1.height - height
                    //可以判断下另一边的scrollbar，减去其宽度避免重叠
                    width: scrollview_1.availableWidth
                    active: scrollview_1.ScrollBar.vertical.active
                    policy: ScrollBar.AsNeeded
                }
            }

            ScrollView{
                id: scrollview_2
                width: 200
                height: 200
                contentWidth: 500
                //contentHeight: 500
                background: Rectangle{
                    border.color: "black"
                    border.width: 1
                }
                padding: 1
                ScrollBar.vertical: BasicScrollBar {
                    parent: scrollview_2
                    //这里有1是为了防止踩再background的border上
                    x: scrollview_2.mirrored ? 1 : scrollview_2.width - width-1
                    y: scrollview_2.topPadding
                    height: scrollview_2.availableHeight
                    active: scrollview_2.ScrollBar.horizontal.active
                    policy: ScrollBar.AlwaysOn //因为每超出范围，所以设置让他显示
                    handleNormalColor: "orange"
                }

                ScrollBar.horizontal: BasicScrollBar {
                    parent: scrollview_2
                    x: scrollview_2.leftPadding
                    y: scrollview_2.height - height-1
                    width: scrollview_2.availableWidth
                    active: scrollview_2.ScrollBar.vertical.active
                    policy: ScrollBar.AsNeeded
                    handleNormalColor: "orange"
                }
            }
        }