QML之自定义滚动条

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

草上爬

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

阅读量8.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Qt工作笔记文章标签： Qt QML ScrollBar

本文链接：https://blog.youkuaiyun.com/caoshangpa/article/details/83957278

Qt工作笔记专栏收录该内容

193 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在QML中创建自定义滚动条，包括实际效果展示和具体实现步骤，提供MyScrollBar.qml及main.qml的示例代码。

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

一.效果

二.实现

MyScrollBar.qml

import QtQuick 2.0

Rectangle {
    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

了解本专栏