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 }
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 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 }
修改的时候就在那两个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 }
研究不易啊,可以的话点个推荐,转载标个出处。