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

测试版本：Qt5.12及Qt5.15 ，参考Qt源码及文档示例

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

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

问题1：（2020-2-6补充）有些组件可能由于默认设置的问题，滚动条的显示不对，拿ListView为例，可能横向的滚动条不出现，我们需要加上类似这样的代码修改默认设置：

        //竖向时默认-1
        contentWidth: 500
        //Flickable默认Flickable.AutoFlickDirection
        flickableDirection: Flickable.AutoFlickIfNeeded

问题2：（2020-12-27补充）在5.14或者5.15版本中，设置了ScrollView的滚动条可能旧的滚动条依旧会显示。参照Qt bug：QTBUG-74230

可以隐藏掉旧的滚动条，给自定义的ScrollBar设置个属性以区分旧的，然后遍历对象树并判断类型，不符合则隐藏。

（2022-11-14补充）如果不用Controls中的ScrollView直接用Templates中的ScrollView，似乎就不会出现多个滚动条。

问题3：滚动条有时候会被ScrollView的部分子部件给挡住，导致事件不能正常处理，直接设置z轴大一点即可。

下面展示实现代码：

（滚动条一般配合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
            Text {
                width: 90
                height: 30
                renderType: Text.NativeRendering
                text: "ScrollBar:"
            }
            //用ScrollView来展示ScrollBar
            ScrollView{
                id: scrollview_1
                width: 200
                height: 200
                //contentWidth: 500
                //contentHeight: 500
                clip: true
                Text{
                    text: "A B C \nD E F"
                    font.family: "SimHei"
                    font.pixelSize: 120
                }
                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
                    z: 10
                    //可以判断下另一边的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
                    z: 10
                    //可以判断下另一边的scrollbar，减去其宽度避免重叠
                    width: scrollview_1.availableWidth
                    active: scrollview_1.ScrollBar.vertical.active
                    policy: ScrollBar.AsNeeded
                }
                //5.15中滚动条展示效果不对，会出现新旧两个滚动条
                //可以给自定义ScrollBar设置一个属性，然后去判断是否为新定义的
                //Component.onCompleted: {
                //    let child_list=control.children;
                //    for(var i=0;i<child_list.length;i++)
                //    {
                //        //给自定义的scrollbar加一个自定义属性，此处为newBar
                //        //遍历scrollview子节点，移除没有自定义属性的
                //        if(child_list[i] instanceof ScrollBar&&
                //                !child_list[i].newBar)
                //            child_list[i].visible=false;
                //    }
                //}
            }

            ScrollView{
                id: scrollview_2
                width: 200
                height: 200
                //contentWidth: 500
                //contentHeight: 500
                clip: true
                Text{
                    text: "A B C \nD E F"
                    font.family: "SimHei"
                    font.pixelSize: 120
                }
                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
                    z: 10
                    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
                    z: 10
                    width: scrollview_2.availableWidth
                    active: scrollview_2.ScrollBar.vertical.active
                    policy: ScrollBar.AsNeeded
                    handleNormalColor: "orange"
                }
            }
        }