qml实现滚动条

来源：互联网发布：数据错误循环冗余检查编辑：程序博客网时间：2024/06/11 06:10

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

0 1