Qt for Android中ListView上拉加载的实现

QML中使用ListView分页加载数据

在使用QtQuick开发移动端应用时，总会使用列表类的组件，而qt给我们提供了很多的选择，但是他只能满足普通的需求，也没有android那样，有那么多的开源库可供使用或者学习，在我的应用中经常会遇到大量的数据需要列表去显示，开始初学QML时，对QT的各个模块不太熟悉，于是每次进入页面就把大量的数据一次加载出来造成页面很卡，于是就想着使用分页来处理大量的数据，这里写了一个简单的例子来解释上拉加载更多数据的原理，希望对初学者有所帮助。

例子很简单，上代码。

Window {

visible: true

width: 640

height: 480

title: qsTr("Hello World")

property int count: 10//每次加载的数据量

property bool needLoadMore:false//是否要加载的标示

//数据模型

ListModel{

id:theModel

ListElement{

number:0

}

ListElement{

number:1

}

ListElement{

number:2

}

ListElement{

number:3

}

ListElement{

number:4

}

ListElement{

number:5

}

ListElement{

number:6

}

ListElement{

number:7

}

ListElement{

number:8

}

ListElement{

number:9

}

ListElement{

number:10

}

}

ListView{

id:lv;

anchors.fill: parent

anchors.margins: 20

clip:true

model:theModel

spacing: 15

delegate: numberDelegate

onMovementEnded: {

//在这里调用数据加载的方法

if(needLoadMore){

console.log("loadMore")

loadMore();

needLoadMore=false;

}

}

onContentYChanged: {

//主要逻辑就在这块，很简单

if(contentHeight>height&&contentY-originY>contentHeight-height){

var dy=(contentY-originY)-(contentHeight-height);

console.log(dy)

if(dy>40){

needLoadMore=true;

}

}

}

// 动画

Behavior on contentY{

NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }

}

}

Component{

id:numberDelegate

Rectangle{

id:wrapper

width:640

height:80

color:"#dedede"

Text{

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

font.pixelSize: 20

text:number

}

}

}

function addNumber(){

console.log(count)

count+=10;

for(var i=count-10;i<count;i++){

theModel.append({"number":i+1})

}

}

function loadMore(){

addNumber();

}

其实核心思想就是判断当前ListView在Y轴上的滑动距离，当滑动到底部时，就去加载数据。