Flutter下拉刷新功能插件pull_to_refresh的使用

概述

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

特性

• 支持上拉加载更多和下拉刷新。
• 适用于大多数滚动组件。
• 提供全局默认指示器和属性配置。
• 支持水平和垂直刷新，以及反向滚动视图（四个方向）。
• 提供多种刷新样式：Behind, Follow, UnFollow, Front。
• 支持二级刷新，类似淘宝和微信的二级刷新效果。
• 支持将指示器放置在其他位置，如微信朋友圈刷新效果。

安装与配置

添加依赖

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

dependencies:
  pull_to_refresh: ^2.0.0

导入包

在Dart文件中导入pull_to_refresh包：

import 'package:pull_to_refresh/pull_to_refresh.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用pull_to_refresh实现下拉刷新和上拉加载更多功能：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _onRefresh() async{
    // 监控网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果失败，使用 refreshFailed()
    if(mounted) {
      setState(() {
        items = ["1", "2", "3", "4", "5", "6", "7", "8"];
      });
    }
    _refreshController.refreshCompleted();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      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: (context, index) {
            return Card(
              child: Center(
                child: Text(items[index]),
              ),
            );
          },
          itemExtent: 100.0,
          itemCount: items.length,
        ),
      ),
    );
  }
}

全局配置

为了统一配置所有SmartRefresher的行为，可以在应用根部使用RefreshConfiguration进行全局配置：

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(
    // ...
  ),
);

注意事项

• SmartRefresher的子组件必须是ScrollView或其子类（如ListView、GridView），不能分离。
• 避免在SmartRefresher外部嵌套可滚动组件，否则可能导致刷新和加载更多功能失效。

通过以上步骤，您可以轻松地在Flutter项目中集成pull_to_refresh插件，实现流畅的下拉刷新和上拉加载更多功能。