qml实现滚动条

qml实现滚动条

Scrolbar.qml

import QtQuick 2.7import QtQuick.Controls 2.0// 滚动条Rectangle { id: scrollbar; opacity: 0 // 绑定到ListView组件 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: listviewer.visibleArea.yPosition * scrollbar.height; width: 15; height: listviewer.visibleArea.heightRatio * scrollbar.height; color: "#6D665C"; radius: 10; Text{ text:"☰";anchors.centerIn: parent} // 鼠标区域 MouseArea {id: mouseArea;anchors.fill: button drag.target: button;drag.axis: Drag.YAxis;drag.minimumY: 0;drag.maximumY: scrollbar.height - button.height onPressed: {button.color = "#A4D3EE";fadeIn.start();} onReleased: {button.color = "#6D665C";fadeOut.start();} // 拖动 onMouseYChanged: { target.contentY = button.y / scrollbar.height * listviewer.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 }}使用：

Scroolbar{ target: listviewer//这是一个listview }

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