QML 修改TableView和TreeView滚动条样式

1 import QtQuick 2.9
2 import QtQuick.Controls 1.4
3 import QtQuick.Controls.Styles 1.4
4 import QtQml.Models 2.2
5 import QtQuick.Controls 2.12
6 
7 TreeView {
8 id:controll
9 anchors.fill: parent
10 
11 ScrollBar {
12 id: verticalBar
13         hoverEnabled: true
14         active: hovered ||pressed
15 orientation: Qt.Vertical
16         size: controll.height /controll.flickableItem.contentHeight
17 visible: controll.__verticalScrollBar.visible
18          visible ? 12 : 0
19 height: controll.height
20 anchors.top: controll.top
21 anchors.right: controll.right
22 policy: ScrollBar.AlwaysOn
23 onPositionChanged: {
24             controll.flickableItem.contentY = position *(controll.flickableItem.contentHeight)
25 }
26 }
27 
28 ScrollBar {
29 id: horizonBar
30         hoverEnabled: true
31         active: hovered ||pressed
32 orientation: Qt.Horizontal
33         size: controll.width /controll.flickableItem.contentWidth
34 visible: controll.__horizontalScrollBar.visible
35          controll.width -verticalBar.width
36         height: visible ? 12 : 0
37 anchors.bottom: controll.bottom
38 anchors.left: controll.left
39 policy: ScrollBar.AlwaysOn
40 onPositionChanged: {
41             controll.flickableItem.contentX = position *(controll.flickableItem.contentWidth)
42 }
43 }
44 
45 Connections{
46 target: controll.flickableItem
47 onContentXChanged: {
48             horizonBar.position = controll.flickableItem.contentX /
49 controll.flickableItem.contentWidth
50 }
51 }
52 
53 Connections {
54 target: controll.flickableItem
55 onContentYChanged: {
56             verticalBar.position = controll.flickableItem.contentY /
57 controll.flickableItem.contentHeight
58 }
59 }
60 }

1 import QtQuick 2.0
2 import QtQuick.Controls 1.4
3 import QtQuick.Controls.Styles 1.4
4 import QtQuick.Controls 2.12
5 
6 TableView {
7 id: controll
8 
9 ScrollBar {
10 id: verticalBar
11         hoverEnabled: true
12         active: hovered ||pressed
13 orientation: Qt.Vertical
14         size: controll.height /controll.flickableItem.contentHeight
15 visible: controll.__verticalScrollBar.visible
16          visible ? 12 : 0
17 height: controll.height
18 anchors.top: controll.top
19 anchors.right: controll.right
20 policy: ScrollBar.AlwaysOn
21 onPositionChanged: {
22             console.log("vertical Bar Y Pos: " +controll.__model
23                         + " " +controll.rowDelegate.height
24                         + " " /*+ controll.positionViewAtRow(0, ListView.Beginning)*/)
25             controll.flickableItem.contentY = position * (controll.flickableItem.contentHeight) - (25 *f_adaptive_block_size_h)
26 }
27 }
28 
29 ScrollBar {
30 id: horizonBar
31         hoverEnabled: true
32         active: hovered ||pressed
33 orientation: Qt.Horizontal
34         size: controll.width /controll.flickableItem.contentWidth
35 visible: controll.__horizontalScrollBar.visible
36          controll.width -verticalBar.width
37         height: visible ? 12 : 0
38 anchors.bottom: controll.bottom
39 anchors.left: controll.left
40 policy: ScrollBar.AlwaysOn
41 onPositionChanged: {
42             controll.flickableItem.contentX = position *(controll.flickableItem.contentWidth)
43 }
44 }
45 
46 Connections{
47 target: controll.flickableItem
48 onContentXChanged: {
49             horizonBar.position = controll.flickableItem.contentX /
50 controll.flickableItem.contentWidth
51 }
52 }
53 
54 Connections {
55 target: controll.flickableItem
56 onContentYChanged: {
57             verticalBar.position = (controll.flickableItem.contentY + (25 * f_adaptive_block_size_h)) /
58 controll.flickableItem.contentHeight
59 }
60 }
61 }

1 import QtQuick 2.12
2 import QtQuick.Controls 2.12
3 import QtQuick.Controls.impl 2.12
4 
5 ScrollBar {
6 id: control
7 
8     property color handleNormalColor: "darkCyan"  //滑块颜色
9     property color backgroundBarColor: "white"       //背景颜色   
10 property color handleHoverColor: Qt.lighter(handleNormalColor)
11 property color handlePressColor: Qt.darker(handleNormalColor)
12 
13     implicitWidth: Math.max(implicitBackgroundWidth + leftInset +rightInset,
14                             implicitContentWidth + leftPadding +rightPadding)
15     implicitHeight: Math.max(implicitBackgroundHeight + topInset +bottomInset,
16                              implicitContentHeight + topPadding +bottomPadding)
17 
18     //滑块样式
19 contentItem: Rectangle {
20         implicitWidth: control.interactive ? 10 : 2
21         implicitHeight: control.interactive ? 10 : 2
22 
23         radius: width / 2
24 color: control.pressed
25                ?handlePressColor
26 :control.hovered
27                  ?handleHoverColor
28 :handleNormalColor
29 
30         opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
31 }
32 
33     //背景
34 background: Rectangle {
35         implicitWidth: control.interactive ? 10 : 2
36         implicitHeight: control.interactive ? 10 : 2
37 color: backgroundBarColor
38 }
39 }