zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Blank page instead of the SharePoint Central Administration site
    BizTalk 2010 BAM Configure
    Use ODBA with Visio 2007
    Handling SOAP Exceptions in BizTalk Orchestrations
    BizTalk与WebMethods之间的EDI交换
    Append messages in BizTalk
    FTP protocol commands
    Using Dynamic Maps in BizTalk(From CodeProject)
    Synchronous To Asynchronous Flows Without An Orchestration的简单实现
    WSE3 and "Action for ultimate recipient is required but not present in the message."
  • 原文地址:https://www.cnblogs.com/yddsblog/p/14765302.html
Copyright © 2011-2022 走看看