QML 修改TableView和TreeView滚动条样式

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         width: 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         width: 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 }

 

TableView控件：

 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         width: 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         width: 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 }

 

修改的时候就在那两个ScrollBar里加样式一个 horizonBar,一个verticalBar,以下是个简单的例子：

 

 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 }

 

 

 

 

研究不易啊，可以的话点个推荐，转载标个出处。

 

posted @ 2021-05-13 17:04  YDD的铁皮锅  阅读(2657)  评论(0)  编辑  收藏  举报