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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Shado_walker/article/details/60575578

用过QML进行列表显示的同仁肯定都知道，QML中的ListView是默认没有ScrollBar的，超出部分的列表项只能通过滚动鼠标滚轮进行显示，但是我们又知道QML中的ScrollView是有ScrollBar的，因此，我们可以通过在ScrollView中嵌入ListView并且重写ScrollView的style来实现列表的显示以及ScrollBar的显示（重写ScrollViewStyle费时费力且效果不佳，请看后面的挫图），这样也同样能够完成鼠标拖动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.5
import Qt.labs.controls 1.0
ListView {
    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，其他属性正常使用就行了，这样就避免了引入控件库使用控件时冲突导致奔溃了。至此，坑已填平*_*。