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

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

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

一、什么是EasyRefresh

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

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

在pubspec.yaml中引入EasyRefresh

 # 下拉刷新、上拉更多
  easy_refresh: ^3.3.2+1
1
2

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

/// 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);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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,
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

整体效果图如下

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

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

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

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