QML ListView定制滚动条

最新推荐文章于 2025-06-10 09:36:29 发布

班公湖里洗过脚

最新推荐文章于 2025-06-10 09:36:29 发布

阅读量5.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： qml 文章标签： qml

本文链接：https://blog.csdn.net/chenyijun/article/details/42876133

qml 专栏收录该内容

38 篇文章

订阅专栏

ListView可以设置默认的滚动条，但默认的滚动条往往不符合我们的要求，所以可以自已定制效果不同的滚动条，下面是代码示例：

//MyListView.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: rootItem
    width: 350
    height: 400

    ListModel {
        id: listRouteModel
        ListElement {titleText: qsTr("标题0"); titleColor: "white"}
        ListElement {titleText: qsTr("标题1"); titleColor: "white"}
        ListElement {titleText: qsTr("标题2"); titleColor: "white"}
        ListElement {titleText: qsTr("标题3"); titleColor: "white"}
        ListElement {titleText: qsTr("标题4"); titleColor: "white"}
        ListElement {titleText: qsTr("标题5"); titleColor: "white"}
        ListElement {titleText: qsTr("标题6"); titleColor: "white"}
        ListElement {titleText: qsTr("标题7"); titleColor: "white"}
        ListElement {titleText: qsTr("标题8"); titleColor: "white"}
        ListElement {titleText: qsTr("标题9"); titleColor: "white"}
        ListElement {titleText: qsTr("标题10"); titleColor: "white"}
        ListElement {titleText: qsTr("标题11"); titleColor: "white"}
        ListElement {titleText: qsTr("标题12"); titleColor: "white"}
        ListElement {titleText: qsTr("标题13"); titleColor: "white"}
        ListElement {titleText: qsTr("标题14"); titleColor: "white"}
        ListElement {titleText: qsTr("标题15"); titleColor: "white"}
        ListElement {titleText: qsTr("标题16"); titleColor: "white"}
        ListElement {titleText: qsTr("标题17"); titleColor: "white"}
        ListElement {titleText: qsTr("标题18"); titleColor: "white"}
        ListElement {titleText: qsTr("标题19"); titleColor: "white"}
        ListElement {titleText: qsTr("标题20"); titleColor: "white"}
        ListElement {titleText: qsTr("标题21"); titleColor: "white"}
        ListElement {titleText: qsTr("标题22"); titleColor: "white"}
        ListElement {titleText: qsTr("标题23"); titleColor: "white"}
        ListElement {titleText: qsTr("标题24"); titleColor: "white"}
    }


    ListView{
        id:listView
        clip: true
        width: 410;
        height: 380
        anchors.bottomMargin: 2
        model: listRouteModel;
        focus: true
        delegate: tabDelegate
    }

    //滚动条
    Rectangle {
        id: scrollbar
        x:400; y:0
        width: 10; height: 380
        radius: 10
        //按钮
        Rectangle {
            id: button
            x:0
            y: listView.visibleArea.yPosition * scrollbar.height
            width: 10
            height: listView.visibleArea.heightRatio * scrollbar.height
            color: "#818b81"
            radius: 10

            //鼠标区域
            MouseArea {
                id: mouseArea
                anchors.fill:button
                drag.target: button
                drag.axis: Drag.YAxis
                drag.minimumY: 0
                drag.maximumY: scrollbar.height
                //拖动
                onMouseYChanged: {
                    listView.contentY = button.y / scrollbar.height * listView.contentHeight
                }
            }
        }
    }
    //Component
    Component {
        id: tabDelegate
        Rectangle {
            width: 100; height: 25;
            color: (listView.currentIndex === index) ? "blue": "green"
            //标题
            Text {
                width: parent.width - 3; height: 25;
                anchors.left: parent.left;
                anchors.leftMargin: 0;
                anchors.top: parent.top
                anchors.topMargin: 0
                font.pixelSize: 16;
                color: (listView.currentIndex === index) ? "red" : titleColor
                text: titleText
                horizontalAlignment: Text.AlignHCenter; //文字水平居中对齐
                verticalAlignment: Text.AlignVCenter;//文字垂直居中对齐
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    listView.currentIndex = index

                    console.log("clicked currentIndex================" + listView.currentIndex)
                }
            }
        }
    }//end Component

}

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MyListView {
        id:myListView
        width: 350
        height: 400
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 20
    }
}

运行效果：