qml实现滚动条

最新推荐文章于 2025-06-30 11:55:51 发布

原创

最新推荐文章于 2025-06-30 11:55:51 发布 · 3.9k 阅读

8 ·

CC 4.0 BY-SA版权

本文档详细介绍了如何在QML中实现滚动条功能，通过示例代码展示了Scrolbar.qml的具体用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Scrolbar.qml

import QtQuick 2.7
import 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.co