国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 學院 > 開發設計 > 正文

QML中ListView的高級使用之增加ScrollBar以及設置ScrollBar的樣式

2019-11-06 06:43:05
字體:
來源:轉載
供稿:網友
用過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.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,其他屬性正常使用就行了,這樣就避免了引入控件庫使用控件時沖突導致奔潰了。至此,坑已填平*_*。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 奈曼旗| 宾川县| 米泉市| 唐海县| 涿州市| 灵寿县| 永泰县| 元阳县| 郧西县| 贵溪市| 大冶市| 岗巴县| 靖州| 中卫市| 阳泉市| 张家口市| 嘉兴市| 资中县| 德安县| 墨玉县| 丹江口市| 法库县| 永城市| 安顺市| 杭锦旗| 扬州市| 鄄城县| 连山| 会东县| 壤塘县| 郸城县| 桐城市| 阿城市| 措美县| 防城港市| 鄂尔多斯市| 漠河县| 太仓市| 东台市| 怀柔区| 绥德县|