QML 修改TableView和TreeView滚动条样式

TreeView控件：

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2
import QtQuick.Controls 2.12

TreeView {  8  id:controll  9  anchors.fill: parent 10 
 ScrollBar { 12  id: verticalBar 13         hoverEnabled: true
        active: hovered || pressed 15  orientation: Qt.Vertical 16         size: controll.height / controll.flickableItem.contentHeight 17  visible: controll.__verticalScrollBar.visible 18         width: visible ? 12 : 0
 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 
 ScrollBar { 29  id: horizonBar 30         hoverEnabled: true
        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
 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 
 Connections{ 46  target: controll.flickableItem 47  onContentXChanged: { 48             horizonBar.position = controll.flickableItem.contentX /
 controll.flickableItem.contentWidth 50  } 51  } 52 
 Connections { 54  target: controll.flickableItem 55  onContentYChanged: { 56             verticalBar.position = controll.flickableItem.contentY /
 controll.flickableItem.contentHeight 58  } 59  } 60 }

 

TableView控件：

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.12

TableView {  7  id: controll  8 
 ScrollBar { 10  id: verticalBar 11         hoverEnabled: true
        active: hovered || pressed 13  orientation: Qt.Vertical 14         size: controll.height / controll.flickableItem.contentHeight 15  visible: controll.__verticalScrollBar.visible 16         width: visible ? 12 : 0
 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 
 ScrollBar { 30  id: horizonBar 31         hoverEnabled: true
        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
 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 
 Connections{ 47  target: controll.flickableItem 48  onContentXChanged: { 49             horizonBar.position = controll.flickableItem.contentX /
 controll.flickableItem.contentWidth 51  } 52  } 53 
 Connections { 55  target: controll.flickableItem 56  onContentYChanged: { 57             verticalBar.position = (controll.flickableItem.contentY + (25 * f_adaptive_block_size_h)) /
 controll.flickableItem.contentHeight 59  } 60  } 61 }

 

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

 

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12

ScrollBar {
    id: control

    property color handleNormalColor: "darkCyan"  //滑块颜色
    property color backgroundBarColor: "white"       //背景颜色   
    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)

    //滑块样式
    contentItem: Rectangle {
        implicitWidth: control.interactive ? 10 : 2
        implicitHeight: control.interactive ? 10 : 2

        radius: width / 2
        color: control.pressed
               ?handlePressColor
               :control.hovered
                 ?handleHoverColor
                 :handleNormalColor

        opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
    }

    //背景
    background: Rectangle {
        implicitWidth: control.interactive ? 10 : 2
        implicitHeight: control.interactive ? 10 : 2
        color: backgroundBarColor
    }
}

 

 

 

 

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