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

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

代码链接：/gongjianbo/QmlComponentStyle.git

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

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

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

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

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

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

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

下面展示实现代码：

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

import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Controls.impl 2.12import QtQuick.Templates 2.12 as T//qtquickcontrols2\src\imports\controls\ScrollBar.qml//from Customizing ScrollBarT.ScrollBar {id: controlproperty 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.AlwaysOffcontentItem: Rectangle {implicitWidth: control.interactive ? 10 : 2implicitHeight: control.interactive ? 10 : 2radius: width / 2color: 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.0states: 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 : 2implicitHeight: control.interactive ? 10 : 2color: "skyblue"//opacity: 0.3}*/}

//main.qmlRow{id: scrollbar_rowspacing: 10Text {width: 90height: 30renderType: Text.NativeRenderingtext: "ScrollBar:"}//用ScrollView来展示ScrollBarScrollView{id: scrollview_1width: 200height: 200//contentWidth: 500//contentHeight: 500clip: trueText{text: "A B C \nD E F"font.family: "SimHei"font.pixelSize: 120}background: Rectangle{border.color: "black"border.width: 1}padding: 1ScrollBar.vertical: ScrollBar {parent: scrollview_1x: scrollview_1.mirrored ? 0 : scrollview_1.width - widthy: scrollview_1.topPaddingz: 10//可以判断下另一边的scrollbar，减去其高度避免重叠height: scrollview_1.availableHeightactive: scrollview_1.ScrollBar.horizontal.activepolicy: ScrollBar.AlwaysOn //默认asneeded需要操作时才显示//默认是可以拖动来交互的//interactive: true}ScrollBar.horizontal: ScrollBar {parent: scrollview_1x: scrollview_1.leftPaddingy: scrollview_1.height - heightz: 10//可以判断下另一边的scrollbar，减去其宽度避免重叠width: scrollview_1.availableWidthactive: scrollview_1.ScrollBar.vertical.activepolicy: 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_2width: 200height: 200//contentWidth: 500//contentHeight: 500clip: trueText{text: "A B C \nD E F"font.family: "SimHei"font.pixelSize: 120}background: Rectangle{border.color: "black"border.width: 1}padding: 1ScrollBar.vertical: BasicScrollBar {parent: scrollview_2//这里有1是为了防止踩再background的border上x: scrollview_2.mirrored ? 1 : scrollview_2.width - width-1y: scrollview_2.topPaddingz: 10height: scrollview_2.availableHeightactive: scrollview_2.ScrollBar.horizontal.activepolicy: ScrollBar.AlwaysOn //因为每超出范围，所以设置让他显示handleNormalColor: "orange"}ScrollBar.horizontal: BasicScrollBar {parent: scrollview_2x: scrollview_2.leftPaddingy: scrollview_2.height - height-1z: 10width: scrollview_2.availableWidthactive: scrollview_2.ScrollBar.vertical.activepolicy: ScrollBar.AsNeededhandleNormalColor: "orange"}}}