目录

1. 简述2. 代码2.1 PullListViewV2.qml2.2 main.qml

1. 简述

QML 中ListView没有自带这个功能，但是提供了自定义页头和页脚组件，控制组件有无，实现下拉刷新和上拉加载。刷新委托和加载委托支持用户完全自定义。

2. 代码

2.1 PullListViewV2.qml

import QtQuickListView {id: listViewproperty bool headerVisible: falseproperty bool footerVisible: falseproperty bool headerHold: falseproperty bool footerHold: falseenum MoveDirection{NoMove,UpToDown,DownToUp}property int moveDirection: PullListViewV2.NoMoveproperty real moveStartContentY: 0onHeaderVisibleChanged: if(!headerVisible) {headerHold = false}onFooterVisibleChanged: if(!footerVisible) {footerHold = false}onContentYChanged: {if(dragging || flicking){moveDirection = (contentY - moveStartContentY < 0) ? PullListViewV2.UpToDown : PullListViewV2.DownToUp// console.log("onContentYChanged:",atYBeginning,moveDirection,headerVisible)switch(moveDirection){case PullListViewV2.UpToDown:{if(atYBeginning && !headerVisible && !footerVisible) {headerVisible = true}}break;case PullListViewV2.DownToUp:{if(atYEnd && !headerVisible && !footerVisible) {footerVisible = true}}break;default:break;}}}//鼠标或手指拖动驱动的界面滚动onDraggingChanged: dragging ? pullStart() : pullEnd()//鼠标滚动驱动的view滚动onFlickingChanged: flicking ? pullStart() : pullEnd()function pullStart(){console.log("pullStart")moveStartContentY = contentY}function pullEnd(){// console.log("pullEnd:",atYBeginning,moveDirection,headerVisible,contentY - moveStartContentY)switch(moveDirection){case PullListViewV2.UpToDown:{if(atYBeginning && headerVisible) {headerHold = true}else if(null !== headerItem){headerVisible = falseheaderHold = false}}break;case PullListViewV2.DownToUp:{if(atYEnd && footerVisible) {footerHold = true}else if(null !== footerItem){footerVisible = falsefooterHold = false}}break;default:break;}moveDirection = PullListViewV2.NoMove}}

2.2 main.qml

import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Item{anchors.fill: parentPullListViewV2{id: listViewanchors.fill: parentmodel: listModeldelegate: Item {id: nameheight: 40width: listView.widthRectangle{anchors.fill: parentanchors.margins: 4color: "red"radius: 4Text{anchors.verticalCenter: parent.verticalCenteranchors.leftMargin: 6anchors.left: parent.lefttext: "行:" + index}}}Component{id: cmpHeaderRectangle{color: "yellow"width: listView.widthheight: 16Text{anchors.centerIn: parenttext: listView.headerHold ? "正在刷新" : "刷新"}}}header: headerVisible ? cmpHeader : nullonHeaderHoldChanged:{if(headerHold)timerRefresh.start()}Component{id: cmpFooterRectangle{color: "yellow"width: listView.widthheight: 16Text{anchors.centerIn: parenttext: listView.footerHold ? "正在加载..." : "加载更多"}}}footer: footerVisible ? cmpFooter : nullonFooterHoldChanged: {if(footerHold)timerLoadMore.start()}}//刷新Timer{id: timerRefreshinterval: 1000onTriggered: {console.log("刷新完成")listModel.refresh()listView.headerVisible = false}}//加载Timer{id: timerLoadMoreinterval: 1000onTriggered: {console.log("加载完成")listModel.loadMore()listView.footerVisible = false}}ListModel{id: listModelfunction refresh(){listModel.clear()for(var i = 0; i < 10; i ++){listModel.append({name:listModel.count + 1})}}function loadMore(){for(var i = 0; i < 5; i ++){listModel.append({name:listModel.count + 1})}}function canLoadMore(){return count > 30 ? false : true;}Component.onCompleted: refresh()}}}