QMLListView定制滚动条

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

//MyListView.qmlimport QtQuick 2.12
import QtQuick.Controls 2.12Item {id: rootItemwidth: 350height: 400ListModel {id: listRouteModelListElement {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:listViewclip: truewidth: 410;height: 380anchors.bottomMargin: 2model: listRouteModel;focus: truedelegate: tabDelegate}//滚动条Rectangle {id: scrollbarx:400; y:0width: 10; height: 380radius: 10//按钮Rectangle {id: buttonx:0y: listView.visibleArea.yPosition * scrollbar.heightwidth: 10height: listView.visibleArea.heightRatio * scrollbar.heightcolor: "#818b81"radius: 10//鼠标区域MouseArea {id: mouseAreaanchors.fill:buttondrag.target: buttondrag.axis: Drag.YAxisdrag.minimumY: 0drag.maximumY: scrollbar.height//拖动onMouseYChanged: {listView.contentY &＃61; button.y / scrollbar.height * listView.contentHeight}}}}//ComponentComponent {id: tabDelegateRectangle {width: 100; height: 25;color: (listView.currentIndex &＃61;&＃61;&＃61; index) ? "blue": "green"//标题Text {width: parent.width - 3; height: 25;anchors.left: parent.left;anchors.leftMargin: 0;anchors.top: parent.topanchors.topMargin: 0font.pixelSize: 16;color: (listView.currentIndex &＃61;&＃61;&＃61; index) ? "red" : titleColortext: titleTexthorizontalAlignment: Text.AlignHCenter; //文字水平居中对齐verticalAlignment: Text.AlignVCenter;//文字垂直居中对齐}MouseArea {anchors.fill: parentonClicked: {listView.currentIndex &＃61; indexconsole.log("clicked currentIndex&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;" &＃43; listView.currentIndex)}}}}//end Component}


//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MyListView {id:myListViewwidth: 350height: 400anchors.top: parent.topanchors.topMargin: 20anchors.left: parent.leftanchors.leftMargin: 20}
}

运行效果&＃xff1a;