Flutter下拉刷新及加载更多插件 pull_to_refresh_plus 的使用

简介

pull_to_refresh_plus 是一个为 Flutter 提供的下拉刷新和上拉加载更多的插件，支持 Android 和 iOS 平台。它几乎适用于所有滚动组件，如 GridView, ListView 等，并提供了全局设置默认指示器和属性的功能。

特性

• 支持下拉刷新和上拉加载
• 适用于大多数滚动组件，如 ListView, GridView
• 提供全局配置默认指示器和属性
• 提供一些常见的指示器
• 支持自定义弹簧动画、阻尼、速度等
• 支持横向和纵向刷新，也支持反向滚动视图
• 提供多种刷新样式：Behind, Follow, UnFollow, Front，以及更多加载样式
• 支持两级刷新，类似淘宝和微信的二级刷新效果

使用方法

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  pull_to_refresh_plus: ^2.0.2

导入包

在 Dart 文件中导入包：

import 'package:pull_to_refresh_plus/pull_to_refresh_plus.dart';

示例代码

以下是一个简单的示例，展示了如何使用 SmartRefresher 组件实现下拉刷新和上拉加载更多功能。

import 'package:flutter/material.dart';
import 'package:pull_to_refresh_plus/pull_to_refresh_plus.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
  RefreshController _refreshController = RefreshController(initialRefresh: false);

  void _onRefresh() async {
    // 模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果失败，使用 refreshFailed()
    _refreshController.refreshCompleted();
  }

  void _onLoading() async {
    // 模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果失败，使用 loadFailed()，如果没有数据返回，使用 LoadNodata()
    items.add((items.length + 1).toString());
    if (mounted) setState(() {});
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull to Refresh Demo'),
      ),
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: WaterDropHeader(),
        footer: CustomFooter(
          builder: (BuildContext context, LoadStatus mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body = Text("pull up load");
            } else if (mode == LoadStatus.loading) {
              body = CupertinoActivityIndicator();
            } else if (mode == LoadStatus.failed) {
              body = Text("Load Failed! Click retry!");
            } else if (mode == LoadStatus.canLoading) {
              body = Text("release to load more");
            } else {
              body = Text("No more Data");
            }
            return Container(
              height: 55.0,
              child: Center(child: body),
            );
          },
        ),
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
          itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
          itemExtent: 100.0,
          itemCount: items.length,
        ),
      ),
    );
  }
}

全局配置

你可以使用 RefreshConfiguration 来全局配置所有子树中的 SmartRefresher 表现，通常将其放置在 MaterialApp 的根部。

RefreshConfiguration(
  headerBuilder: () => WaterDropHeader(), // 配置默认头部指示器
  footerBuilder: () => ClassicFooter(),   // 配置默认底部指示器
  headerTriggerDistance: 80.0,            // 头部触发刷新的距离
  springDescription: SpringDescription(stiffness: 170, damping: 16, mass: 1.9), // 自定义回弹动画
  maxOverScrollExtent: 100,               // 最大拖动范围
  maxUnderScrollExtent: 0,                // 底部最大拖动范围
  enableScrollWhenRefreshCompleted: true, // 在刷新完成后是否允许滚动
  enableLoadingWhenFailed: true,          // 在加载失败时是否允许手势上拉加载更多
  hideFooterWhenNotFull: false,           // 当视口小于一屏时禁用上拉加载更多
  enableBallisticLoad: true,              // 触发惯性加载更多
  child: MaterialApp(
    // ... 其他配置
  ),
);

国际化支持

从版本 1.5.6 开始，该插件支持国际化。你可以在 MaterialApp 或 CupertinoApp 中添加以下代码：

MaterialApp(
  localizationsDelegates: [
    RefreshLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en'),
    const Locale('zh'),
  ],
  localeResolutionCallback: (Locale locale, Iterable<Locale> supportedLocales) {
    return locale;
  },
  // ... 其他配置
)