前言

用 QML 開發界面的好處想必就不用多說了吧，可以總結為一個字：爽。
的確如此，用 QML 可以快速的開發出一些非常酷炫和復雜的界面，并且代碼還非常簡潔，可讀性很強，容易理解。
今天要總結的是關于 ListView 中的一些常用的屬性，非常實用，不過如果是剛接觸 ListView 的話，可能會有些陌生（本人剛開始用的時候也是，然后翻遍了 Qt 幫助文檔），所以這里匯總一些最常用的屬性并介紹其用法。

正文

類似相片瀏覽

相片瀏覽的場景相信大家都非常熟悉了，在手機中打開相冊瀏覽相片的時候，通過左右滑動可以一張張的瀏覽相片，那么如果用ListView如何來實現呢，來看個簡單的 demo

import QtQuick.Window 2.2 import QtQuick.Controls 2.2Window {visible: truewidth: 300height: 450title: qsTr("Hello World")ListView{id:listViewanchors.fill: parentmodel: 10snapMode: ListView.SnapOneItemorientation:ListView.Horizontaldelegate: Rectangle{width: listView.widthheight: listView.heightcolor: index%2 ? "red":"yellow"Label{anchors.centerIn: parentfont.pointSize: 100text: index}}} }

效果圖：

代碼很簡單，最重要的兩句話：

snapMode: ListView.SnapOneItem orientation:ListView.Horizontal

第一句是將切換模式設置為單張切換；
第二句是將列表改成水平瀏覽模式。

currentIndex動態切換

不知道大家有沒有遇到過這種情況，當切換ListView的item的時候，currentIndex并不會跟隨著變化，來看個示例：

那么，如何將在我們切換 item 的時候將 currentIndex 也跟隨著變化呢？只需要添加一句：

highlightRangeMode: ListView.StrictlyEnforceRange

再看看效果圖：

為什么要特意將 currentIndex動態切換提出來單獨說呢，有時候這個功能會特別有用，特別是我在開發相片瀏覽功能的時候，比如我們在切換 item 后需要用到當前的 currentIndex，這時候如果 index 不跟隨變化那就麻煩了。之前網上有人的做法是，在 delegate 中添加 MouseAera中，響應點擊事件然后手動currentIndex ，這種方法存在很多弊端。

禁止列表首尾滑動

這個標題可能有些拗口，意思其實就是，當列表在首頁或尾頁的時候，如果再繼續滑動會有回彈的效果。
先看個效果圖：

但是有些設計中可能并不需要這種默認的設置，那么該如何修改呢，其實很簡單，加上這句話：

boundsBehavior:Flickable.StopAtBounds

這其實就是設置在邊緣的時候不能再滑動，再看一下效果：

設置最大滑動速度

不知道大家在做 QML for Android 開發的時候有沒有遇到過這種問題，特別是前幾年 Qt 低版本的時候，使用 ListView 編譯到 Android 手機上，列表滑動特別不自然，滑動速度特別快（也和手機屏幕像素有關），和平臺的兼容性沒有做得很好，幸好隨著 Qt 版本的升級，解決了這個問題，不過有時候還是需要自己控制最大的滑動速度，設置屬性如下：

maximumFlickVelocity:7000 //設置滑動的最大速度

這里的數值單位是： 像素/秒
如果不做設置，會默認跟隨平臺特性來執行。如果要自己定義這個滑動速度，需要多調試一下，找到適合的滑動效果。

添加 header

ListView 可以設置 headerItem，話不多說，直接看效果圖吧

ListView{id:listViewanchors.fill: parentmodel: 10headerPositioning: ListView.PullBackHeaderheader: Rectangle{width: listView.widthheight: 70color: "green"Label{anchors.centerIn: parenttext: "this is header"}}onCurrentIndexChanged: {console.log("current index = ",currentIndex)}delegate: Rectangle{width: listView.widthheight: 280color: index%2 ? "red":"yellow"Label{id:txtanchors.centerIn: parentfont.pointSize: 100text: index}Label{anchors.top: txt.bottomfont.pointSize: 30text: "currentIndex = " + listView.currentIndexanchors.horizontalCenter: parent.horizontalCenter}}}

和 header 對應的還有一個 footer，原理是一樣的，只是顯示的位置是在底部。這里就不多介紹了。

下拉刷新

ListView列表下拉刷新是最常見的 場景了吧，這里為了演示做了一個簡單的 demo，先來看看效果

源碼：

import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2Window {visible: truewidth: 250height: 350title: qsTr("ListView")property bool refreshFlag: falseRectangle{width: parent.widthheight: -listView.contentYcolor: "cyan"Label{anchors.centerIn: parenttext:"下拉刷新"visible: listView.contentYr}}BusyIndicator{id:busyz:4running: falseanchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: parent.height/3.Timer{interval: 2000running: busy.runningonTriggered: {busy.running = false}}}ListView{id:listViewanchors.fill: parentmodel: 30onContentYChanged: {if(-contentY > 40){refreshFlag = true}}onMovementEnded: {if(refreshFlag){refreshFlag = falsebusy.running = true}}onCurrentIndexChanged: {console.log("current index = ",currentIndex)}delegate: Rectangle{width: listView.widthheight: 70color: index%2 ? "red":"yellow"Label{id:txtanchors.centerIn: parentfont.pointSize: 20text: index}}} }

OK，暫且介紹這幾種最常用的功能，寫得不好的地方請多指出。

總結

以上是生活随笔為你收集整理的QML ListView几个常用且非常重要的属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。