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
}
}
运行效果: