QML之自定义滚动条

QML之自定义滚动条

一.效果

二.实现

MyScrollBar.qml

import QtQuick 2.0Rectangle { id: scrollBar opacity: 0 property ListView target : ListView{} width: 15 height: target.height anchors.right: parent.right color: "#ccbfbf" radius: 10 clip: true Rectangle { id: button x: 0 y: target.visibleArea.yPosition * scrollBar.height width: 15 height: target.visibleArea.heightRatio * scrollBar.height color: "#6D665C" radius: 10 Text{ text:"☰" anchors.centerIn: parent } MouseArea { id: mouseArea anchors.fill: button hoverEnabled: true drag.target: button; drag.axis: Drag.YAxis drag.minimumY: 0 drag.maximumY: scrollBar.height - button.height onEntered: { if(!mouseArea.pressed) fadeIn.start() } onExited: { if(!mouseArea.pressed) fadeOut.start() } onPressed: { button.color = Qt.darker("#6D665C") } onReleased: { button.color = "#6D665C" if(!mouseArea.containsMouse) fadeOut.start() } onMouseYChanged: { target.contentY = button.y / scrollBar.height * target.contentHeight } } } Connections{ target: scrollBar.target onMovingVerticallyChanged: { if (target.movingVertically) fadeIn.start() else fadeOut.start() } onMovingHorizontallyChanged: { if (target.movingHorizontally) fadeIn.start() else fadeOut.start() } } NumberAnimation { id:fadeIn target: scrollBar properties: "opacity" duration: 500 from: 0; to: 1 } NumberAnimation { id:fadeOut target: scrollBar properties: "opacity" duration: 500 from: 1 to: 0 }}

main.qml

import QtQuick 2.9import QtQuick.Controls 2.2ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Scroll") ListView { id:listView anchors.fill: parent model: 20 delegate: ItemDelegate { text: "Item " + (index + 1) width: parent.width } MyScrollBar{ target: listView } }}

​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。