qmllistView添加滚动条
开发环境：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.left: parent.left; anchors.leftMargin: 50
orientation: ListView.Vertical//垂直列表
orientation: ListView.Vertical//垂直列表
interactive: true;//元素可拖动
clip: true //
ScrollBar.vertical: ScrollBar {
id: scrollBar
onActiveChanged: {
console.log("onActiveChanged========================")
active = true;
}
//                    lor = "yellow"
//                    scrollBar.active = true;
//                    scrollBar.handle.width = 10;
console.log("Completed========================")
}
}
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;
win10滚动条设置
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 更新