qml listView添加滚动条

开发环境：window10  Qt5.13.1

qml listView在编程中用得比较广泛，元素多了，我们希望能够看到滚动条，并且可以托动，默认的listView是不带滚动条的，我们可以设置ScrollBar.vertical的属性，添加滚动条。

其中有几个属性也特别重要：

interactive: 这个属性表示元素是否可以拖动，

orientation:设置列表的方向

clip：是否可裁剪，默认是false,这个时候向上拖动会有一个项超出界限，所有一般设置为true

具体的代码示例如下：

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: listRect
        color: "green"
        anchors.fill: parent


        //菜单
        ListModel {
            id: listRouteModel
            ListElement {titleText: qsTr("卤水鸡翅"); titleColor: "white"}
            ListElement {titleText: qsTr("夫妻肺片"); titleColor: "white"}
            ListElement {titleText: qsTr("糖醋小排"); titleColor: "white"}
            ListElement {titleText: qsTr("面拖大排"); titleColor: "white"}
            ListElement {titleText: qsTr("家乡蛋饺"); titleColor: "white"}
            ListElement {titleText: qsTr("腊味合蒸"); titleColor: "white"}
            ListElement {titleText: qsTr("水笋烧肉"); titleColor: "white"}
            ListElement {titleText: qsTr("剁椒鸭块"); titleColor: "white"}
            ListElement {titleText: qsTr("粉蒸大肉"); titleColor: "white"}
            ListElement {titleText: qsTr("梅菜烧肉"); titleColor: "white"}
            ListElement {titleText: qsTr("双菇肉片"); titleColor: "white"}
            ListElement {titleText: qsTr("红烧大肉"); titleColor: "white"}
            ListElement {titleText: qsTr("黄豆焖鸡"); titleColor: "white"}
            ListElement {titleText: qsTr("咖哩鸡块"); titleColor: "white"}
            ListElement {titleText: qsTr("茄汁排条"); titleColor: "white"}
            ListElement {titleText: qsTr("椒盐排条"); titleColor: "white"}
            ListElement {titleText: qsTr("小炒鸭块"); titleColor: "white"}
            ListElement {titleText: qsTr("蚝油牛肉"); titleColor: "white"}
            ListElement {titleText: qsTr("麻辣翅根"); titleColor: "white"}
            ListElement {titleText: qsTr("杭椒牛柳"); titleColor: "white"}
            ListElement {titleText: qsTr("清蒸咸肉"); titleColor: "white"}
        }

        ListView {
            id: listRouteView
            width: 100; height: 320
            anchors.top: parent.top; anchors.topMargin: 50;
            anchors.left: parent.left; anchors.leftMargin: 50
            orientation: ListView.Vertical//垂直列表
            interactive: true;//元素可拖动
            clip: true //
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                onActiveChanged: {
                    console.log("onActiveChanged========================")
                    active = true;
                }
                Component.onCompleted: {
//                    scrollBar.handle.color = "yellow"
//                    scrollBar.active = true;
//                    scrollBar.handle.width = 10;
                    console.log("Component.onCompleted========================")
                }
            }

            model: listRouteModel;
            focus: true
            delegate: tabDelegate

        }
        //Component
        Component {
            id: tabDelegate
            Rectangle {
                width: 100; height: 25;
                color: (listRouteView.currentIndex === index) ? "blue": "transparent"
                //标题
                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: (listRouteView.currentIndex === index) ? "red" : titleColor
                    text: titleText
                    horizontalAlignment: Text.AlignHCenter; //文字水平居中对齐
                    verticalAlignment: Text.AlignVCenter;//文字垂直居中对齐
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listRouteView.currentIndex = index
                        //console.log("clicked tab=================" + index)
                        //selectIndex(index)
                        console.log("clicked currentIndex================" + listRouteView.currentIndex)
                    }
                }
            }
        }//end Component

    }
}

2020-03-25 更新