flutter开发实战-下拉刷新与上拉加载更多实现

flutter开发实战-下拉刷新与上拉加载更多实现

在开发中经常遇到列表需要下拉刷新与上拉加载更多,这里使用EasyRefresh,版本是3.3.2+1

一、什么是EasyRefresh

EasyRefresh可以在Flutter应用程序上轻松实现下拉刷新和上拉加载。它几乎支持所有Flutter Scrollable小部件。它的功能与安卓的SmartRefreshLayout非常相似,也吸收了许多第三方库的优势。EasyRefresh集成了各种风格的页眉和页脚,但它没有任何限制,您可以轻松自定义。使用Flutter强大的动画,即使只是一个简单的控制也可以完成。EasyRefresh的目标是为Flutter创建一个强大、稳定、成熟的pull-to-refresh框架。

二、实现下拉刷新与上拉加载更多

在pubspec.yaml中引入EasyRefresh

dart 复制代码
 # 下拉刷新、上拉更多
  easy_refresh: ^3.3.2+1

在使用EasyRefresh过程中,需要用到EasyRefreshController来控制刷新结束。

dart 复制代码
/// Finish the refresh task and return the result.
  /// [result] Result of task completion.
  /// [force] Enforced, used to modify the result.
  void finishRefresh(
      [IndicatorResult result = IndicatorResult.success, bool force = false]) {
    assert(controlFinishRefresh || force,
        'Please set controlFinishRefresh to true, then use. If you want to modify the result, you can set force to true.');
    _state?._headerNotifier._finishTask(result);
  }

  /// Finish the load task and return the result.
  /// [result] Result of task completion.
  /// [force] Enforced, used to modify the result.
  void finishLoad(
      [IndicatorResult result = IndicatorResult.success, bool force = false]) {
    assert(controlFinishLoad || force,
        'Please set controlFinishLoad to true, then use. If you want to modify the result, you can set force to true.');
    _state?._footerNotifier._finishTask(result);
  }

整体实现下拉刷新与上拉加载更多完整代码如下

dart 复制代码
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';

class RefreshPage extends StatefulWidget {
  const RefreshPage({super.key});

  @override
  State<RefreshPage> createState() => _RefreshPageState();
}

class _RefreshPageState extends State<RefreshPage> {
  int _count = 10;
  late EasyRefreshController _controller;

  @override
  void initState() {
    super.initState();
    _controller = EasyRefreshController(
      controlFinishRefresh: true,
      controlFinishLoad: true,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('EasyRefresh'),
      ),
      body: EasyRefresh(
        controller: _controller,
        header: const BezierCircleHeader(),
        footer: const ClassicFooter(),
        onRefresh: () async {
          await Future.delayed(const Duration(seconds: 4));
          if (!mounted) {
            return;
          }
          setState(() {
            _count = 10;
          });
          _controller.finishRefresh();
          _controller.resetFooter();
        },
        onLoad: () async {
          await Future.delayed(const Duration(seconds: 4));
          if (!mounted) {
            return;
          }
          setState(() {
            _count += 5;
          });
          _controller.finishLoad(
              _count >= 20 ? IndicatorResult.noMore : IndicatorResult.success);
        },
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Card(
              child: Container(
                alignment: Alignment.center,
                height: 80,
                child: Text('${index + 1}'),
              ),
            );
          },
          itemCount: _count,
        ),
      ),
    );
  }
}

整体效果图如下

三、实现下拉刷新与上拉加载更多

flutter开发实战-下拉刷新与上拉加载更多实现。

https://blog.csdn.net/gloryFlow/article/details/133869961

学习记录,每天不停进步。

相关推荐
Jeremy_Lee12328 分钟前
MySQL 数据导出及备份方法
android
How_doyou_do1 小时前
样式冲突修复组件
前端·javascript·html
西西学代码1 小时前
安卓开发---写项目的注意事项
android
**之火1 小时前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
come112342 小时前
深入分析JAR和WAR包的区别 (指南七)
android·spring boot·后端
m0_616188492 小时前
CSS中的伪类和伪元素
前端·javascript·css
用户092 小时前
停止滥用 Dispatchers.IO:Kotlin 协程调度器的深度陷阱与优化实战
android·面试·kotlin
快乐就好ya2 小时前
React基础到进阶
前端·javascript·react.js
峥嵘life2 小时前
Android16 adb投屏工具Scrcpy介绍
android·开发语言·python·学习·web安全·adb