qml list的ScrollBar

最近正在试验qml各个控件的性能，就想做个定制的ScrollBar，以下是代码实现

 1 import QtQuick 2.7
 2 import QtQuick.Controls 2.3
 3 
 4 Rectangle {
 5     width:640
 6     height:480
 7         property bool refreshFlag: false
 8             Rectangle{
 9                 width: parent.width
10                 height: -listView.contentY
11                 color: "cyan"
12                 Label{
13                     anchors.centerIn: parent
14                     text:"下拉刷新"
15                     visible: listView.contentYr
16                 }
17             }
18             BusyIndicator{
19                 id:busy
20                 z:4
21                 running: false
22                 anchors.horizontalCenter: parent.horizontalCenter
23                 anchors.top: parent.top
24                 anchors.topMargin: parent.height/3
25                 Timer{
26                     interval: 2000
27                     running: busy.running
28                     onTriggered: { busy.running = false }
29                 }
30             }
31             ListView{
32                 id:listView
33                 anchors.fill: parent
34                 model: 30
35                 onContentYChanged: {
36                     if(-contentY > 40)
37                     { refreshFlag = true }
38                 }
39                 onMovementEnded: {
40                     if(refreshFlag){
41                         refreshFlag = false
42                         busy.running = true
43                     }
44                 }
45                 onCurrentIndexChanged: {
46                     console.log("current index = ",currentIndex)
47                 }
48                 delegate: Rectangle{
49                     width: listView.width
50                     height: 70
51                     color: index%2 ? "red":"yellow"
52                     Label{
53                         id:txt
54                         anchors.centerIn: parent
55                         font.pointSize: 20
56                         text: index
57                     }
58                 }
59                 ScrollBar.vertical: ScrollBar {
60                     id: scrollBar
61                     hoverEnabled: true
62                     active: hovered || pressed
63                     orientation: Qt.Vertical
64                     size: 0.8
65                     anchors.top: parent.top
66                     anchors.right: parent.right
67                     anchors.bottom: parent.bottom
68                     contentItem: Rectangle  {
69                        implicitWidth: 6
70                        implicitHeight: 100
71                        radius: width / 2
72                        color: scrollBar.pressed ? "#81e889" : "#c2f4c6"
73 
74                     }
75                 }
76             }
77 }

效果：

 

posted @ 2019-05-23 15:37  wxmwanggood  阅读(1260)  评论(0)  编辑  收藏  举报