Qml自定义组件 - ListView下拉刷新 - PullToRefreshHandler

Posted maoruimas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Qml自定义组件 - ListView下拉刷新 - PullToRefreshHandler相关的知识,希望对你有一定的参考价值。

Properties

  • listView: ListView
  • refreshing: bool

Signals

  • refresh()

Methods

  • endRefresh()

Detailed Description

此组件通过添加入ListView实现下拉刷新功能. 一旦用户将列表下拉, 直到超出某个阈值, 该组件就会发出refresh()信号, 并悬停直到endRefresh()被用户调用.

Example Usage

ListView {
    id: listView
    anchors.fill: parent
    spacing: 1

    PullToRefreshHandler {
        id: pullToRefreshHandler
        onRefresh: timer.start()
    }

    Timer {
        id: timer
        interval: 1000
        onTriggered: pullToRefreshHandler.endRefresh()
    }

    model: 10
    delegate: ItemDelegate {
        width: parent.width
        height: 50
        text: "Item " + index
    }
}

技术图片

Source code

// PullToRefreshHandler.qml
import QtQuick 2.0

Item {
    id: root
    width: listView.width
    height: 50
    y: -height - listView.contentY

    readonly property bool refreshing: state == "Refreshing"
    property var listView: parent
    signal refresh()
    function endRefresh() {
        state = "Refreshed"
        listView.topMargin = 0
        listView.contentY = -height
        listView.interactive = true
        timer.start()
    }

    Timer {
        id: timer
        interval: 500
        onTriggered: listView.flick(0, 1)
    }

    Connections {
        target: listView
        onDragStarted: {
            if (state != "Refreshing") {
                _.pulling = true
            }
        }
        onDragEnded: {
            if (listView.contentY < 0) {
                listView.flickDeceleration = 0
                if (state == "PulledEnough") {
                    state = "Refreshing"
                    listView.topMargin = height
                    listView.interactive = false
                    _.pulling = false
                    refresh()
                }
            }
        }
    }

    Text {
        id: label
        anchors.centerIn: parent
    }

    states: [
        State {
            name: "PulledABit"; when: _.pulling && y < 0
            PropertyChanges {target: label; text: qsTr("Pull to refresh")}
        },
        State {
            name: "PulledEnough"; when: _.pulling && y >= 0
            PropertyChanges {target: label; text: qsTr("Release to refresh")}
        },
        State {
            name: "Refreshing"
            PropertyChanges {target: label; text: qsTr("Refreshing")}
        },
        State {
            name: "Refreshed"
            PropertyChanges {target: label; text: qsTr("Refreshed")}
        }
    ]

    QtObject {
        id: _
        property bool pulling
    }
}

以上是关于Qml自定义组件 - ListView下拉刷新 - PullToRefreshHandler的主要内容,如果未能解决你的问题,请参考以下文章

react-native 自定义 下拉刷新 / 上拉加载更多 组件

Android自定义下拉刷新(优化)

Qt qml中listview 列表视图控件(下拉刷新上拉分页滚动轴)

Android自定义控件--下拉刷新的实现

自定义ListView实现下拉刷新,下拉加载的功能

探索SwipeRefreshLayout配合自定义ListView完成下拉刷新滑到底部自动加载更多