Flutter下拉刷新插件yb_pull_to_refresh的使用

Flutter下拉刷新插件yb_pull_to_refresh的使用

简介

yb_pull_to_refresh 是一个提供上拉加载和下拉刷新功能的 Flutter 插件，适用于 Android 和 iOS 平台。它几乎可以适配所有的部件，并提供了丰富的配置选项。

特性

• 支持下拉刷新和上拉加载功能。
• 几乎适合所有部件。
• 提供全局设置默认指示器和属性。
• 支持多种常见的刷新指示器样式。
• 支持 Android 和 iOS 的默认滑动引擎，可以自定义弹性动画、速度和阻尼等。
• 支持水平和垂直刷新，支持翻转列表（四个方向）。
• 提供多种刷新指示器风格（如跟随、不跟随、位于背部或前部），以及多种加载更多风格。
• 支持“二楼刷新”，类似于淘宝、微信的二楼功能。
• 支持将指示器存放在 Viewport 外部，例如朋友圈刷新效果。

使用方法

1. 添加依赖

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

dependencies:
  yb_pull_to_refresh: ^2.0.0

然后运行以下命令安装依赖：

flutter pub get

2. 导入库

在需要使用的 Dart 文件中导入：

import 'package:yb_pull_to_refresh/yb_pull_to_refresh.dart';

3. 基本示例

以下是简单的下拉刷新和上拉加载示例代码：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RefreshController _refreshController = RefreshController();

  int _counter = 0;

  void _onRefresh() async {
    // 模拟网络请求
    await Future.delayed(const Duration(milliseconds: 1000));

    // 刷新完成
    _refreshController.refreshCompleted();
  }

  void _onLoading() async {
    // 模拟加载更多数据
    await Future.delayed(const Duration(milliseconds: 1000));

    // 更新数据
    setState(() {
      _counter += 10;
    });

    // 加载完成
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SmartRefresher(
        enablePullDown: true, // 开启下拉刷新
        enablePullUp: true, // 开启上拉加载
        controller: _refreshController,
        onRefresh: _onRefresh, // 下拉刷新回调
        onLoading: _onLoading, // 上拉加载回调
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '当前计数: $_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

全局配置

可以通过 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(
    home: MyHomePage(),
  ),
);

自定义指示器

可以通过继承 IndicatorBuilder 来创建自定义指示器。例如，使用 SpinKit 创建一个旋转加载指示器：

import 'package:flutter_spinkit/flutter_spinkit.dart';

class CustomHeader extends IndicatorBuilder {
  @override
  Widget build(BuildContext context, RefreshStatus status) {
    return SpinKitFadingCube(
      color: Colors.blue,
      size: 40.0,
    );
  }
}

然后在 RefreshConfiguration 中设置：

headerBuilder: () => CustomHeader(),