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了,其代碼如下:
如果我們想改變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"會彈出如下窗口:
跟第一幅圖相比,是不是美化多了,而且不費時不費力(^_^上圖是有點挫,但是如果在加以美化自定義,就會更美了,關鍵說明問題就行^_^)。另外,在上面剛才說了有一處坑,那么是什么坑呢,又怎樣填坑呢?上面說了,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做滾動條,代碼如下:
意思是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,其他屬性正常使用就行了,這樣就避免了引入控件庫使用控件時沖突導致奔潰了。至此,坑已填平*_*。
新聞熱點
疑難解答