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轴上的滑动距离，当滑动到底部时，就去加载数据。