ListView上拉刷新下拉加载

G--H

于 2022-08-24 15:33:33 发布

阅读量170

点赞数

分类专栏： qml 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_56857879/article/details/126505804

版权

qml 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了如何使用Qt Quick来创建一个具有下拉刷新和加载更多的ListView。通过监听ListView的内容Y坐标变化，实现当内容滚动到顶部时触发下拉刷新效果，并展示了一个忙碌指示器。同时，当内容滚动到底部时，会触发加载更多数据的逻辑。示例代码展示了具体的实现细节，包括刷新标志的设置和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 250
    height: 350
    title: qsTr("ListView")
    property bool refreshFlag: false

    Rectangle{
        width: parent.width
        height: -listView.contentY
        color: "cyan"
        Label{
            anchors.centerIn: parent
            text:"下拉刷新"
            visible:listView.contentY
        }
    }

    BusyIndicator{
        id:busy
        z:4
        running: false
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: parent.height/3.
        Timer{
            interval: 2000
            running: busy.running
            onTriggered: {
                busy.running = false
            }
        }
    }

    ListView{
        id:listView
        anchors.fill: parent
        model: 30

        onContentYChanged: {
            if(-contentY > 30){
                refreshFlag = true
                console.log("刷新刷新刷新刷新刷新刷新")
            }
            if(contentHeight>height && contentY-originY > contentHeight-height+30)
            {
                console.log("加载加载加载加载加载加载")
            }
        }
        onMovementEnded: {
            if(refreshFlag){
                refreshFlag = false
                busy.running = true
            }
        }
        delegate: Rectangle{
            width: listView.width
            height: 70
            color: "white"
            Label{
                id:txt
                anchors.centerIn: parent
                font.pointSize: 20
                text: index
                color: "black"
            }
        }
    }
}