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

用过QML进行列表显示的同仁肯定都知道，QML中的ListView是默认没有ScrollBar的，超出部分的列表项只能通过滚动鼠标滚轮进行显示，但是我们又知道QML中的ScrollView是有ScrollBar的，因此，我们可以通过在ScrollView中嵌入ListView并且重写ScrollView的style来实现列表的显示以及ScrollBar的显示（重写ScrollViewStyle费时费力且效果不佳，请看后面的挫图），这样也同样能够完成鼠标拖动ScrollBar滚动列表，其实现代码大致如下：

ScrollView{id:scroll_bar    style:style:ScrollViewStyle{//...}ListView {        id: list_viewanchors.fill: parentclip: true        orientation: ListView.VerticalsnapMode: ListView.NoSnap        model: root.modeldelegate: 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_viewanchors.fill: parentclip        : true    orientation : ListView.VerticalsnapMode    : ListView.NoSnap    model       : root.modeldelegate: 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，其他属性正常使用就行了，这样就避免了引入控件库使用控件时冲突导致奔溃了。至此，坑已填平*_*。