最近正在试验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 }
效果: