• 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          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 }

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

    神马东西,什么鬼!! ┏┛墓┗┓...(((m -__-)m
  • 相关阅读:
    PHP中使用Redis
    找回Xcode7的代码折叠功能
    使用 Kingfisher 处理网络图片的读取与缓存
    Swift的两个小窍门
    斯坦福公开课:Developing IOS 8 App with Swift(1-3)心得体会
    What is the relationship between Xcode, Swift and Cocoa?
    C++中static用法总结
    C++中const用法总结
    数据库概念要点
    虚拟内存地址和物理内存地址
  • 原文地址:https://www.cnblogs.com/yddsblog/p/14765302.html
Copyright © 2020-2023  润新知