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

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

相关推荐
endingCode7 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
大白要努力!30 分钟前
android 使用SQLiteOpenHelper 如何优化数据库的性能
android·数据库·oracle
Estar.Lee36 分钟前
时间操作[取当前北京时间]免费API接口教程
android·网络·后端·网络协议·tcp/ip
Winston Wood1 小时前
Perfetto学习大全
android·性能优化·perfetto
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
旭日猎鹰2 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰2 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神2 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云