QML中ListView的高级使用之增加ScrollBar以及设置ScrollBar的样式

ScrollView{	id:scroll_bar    style:style:ScrollViewStyle{		//...	}	ListView {        id: list_view		anchors.fill: parent		clip: true        orientation: ListView.Vertical		snapMode: ListView.NoSnap        model: root.model		delegate: Rectangle {			//...		}	}}但是，这样做的一个缺陷是ScrollView的ScrollBar是自带原生的，不能进行自定义显示的，比如想改变ScrollBar的宽度、高度、颜色等，在这种情况下是不能实现的。其显示效果如下图：如果我们想改变ScrollBar的样式颜色宽高度，就得另想办法，这里介绍一种很少被人发现的高级用法：ScrollBar.vertical。在Qt的帮助中输入关键字"ScrollBar",阅读帮助可发现ScrollBar的使用必须引入import Qt.labs.controls 1.0（这里有坑，后面有填坑办法^_^）,继续阅读，其描述中有这么一句：---------------------------------------------------------------------------------------ScrollBar is an interactive bar that can be used to scroll to a specific position. A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, such as ListView and GridView.---------------------------------------------------------------------------------------看到这里就有希望了，由于ListView是继承自Flickable的，所以，我们就可以在ListView中直接用ScrollBar来自定义自己的ScrollBar了，其代码如下：
ListView {    id: list_view	anchors.fill: parent	clip        : true    orientation : ListView.Vertical	snapMode    : ListView.NoSnap    model       : root.model	delegate: Rectangle {		//...	}	ScrollBar.vertical: ScrollBar {        id: scrollBar        onActiveChanged: {            active = true;        }        Component.onCompleted: {            scrollBar.handle.color = "red";            scrollBar.active = true;            scrollBar.handle.width = 20;			scrollBar.handle.height = 100;        }    }}这样，通过给ScrollBar.vertical设置ScrollBar控件，我们就实现了对ListView的实现滚动条的自定义效果。我们可以设置scrollBar.handle的宽度、高度、以及颜色，达到美化ScrollBar滚动条的目的。其效果如下图：跟第一幅图相比，是不是美化多了，而且不费时不费力（^_^上图是有点挫，但是如果在加以美化自定义，就会更美了，关键说明问题就行^_^）。另外，在上面刚才说了有一处坑，那么是什么坑呢，又怎样填坑呢？上面说了，ScrollBar的使用必须引入import Qt.labs.controls 1.0，但是假如我们的页面中又引入了import QtQuick.Controls 1.4，那么就存在一个问题，在这个页面中我们在使用Button或Label时，QML就不知道我们到底是用QtQuick库的控件呢还是用Qt.labs库的控件，在Qt帮助中输入关键字"Button"会弹出如下窗口：意思是QtQuick库和Qt.labs库中都有这个控件，让我们选择呢，那么在使用时，QML当然不知道到底用哪一个，就会导致运行后程序奔溃。解决以上问题的办法就是对ListView进行简单的封装，在封装的这个qml文件中，我们引入Qt.labs库并且使用ScrollBar给这个ListView做滚动条，代码如下：
import QtQuick 2.5import Qt.labs.controls 1.0ListView {    id: list_area    anchors.fill: parent    orientation : ListView.Vertical    ScrollBar.vertical: ScrollBar {        id: scrollBar        onActiveChanged: {            active = true;        }        Component.onCompleted: {            scrollBar.handle.color = "#686A70";            scrollBar.active = true;            scrollBar.handle.width = 10;        }    }}以上就是封装的整个文件内容，命名为ListViewScrollBar.qml。然后在我们真正使用ListView的qml文件中不要使用原始的ListView，而是使用我们自定义封装的ListViewScrollBar，其他属性正常使用就行了，这样就避免了引入控件库使用控件时冲突导致奔溃了。至此，坑已填平*_*。