Flutter下拉刷新特效插件easy_refresh_bubbles的使用

Flutter下拉刷新特效插件easy_refresh_bubbles的使用

Bubbles Indicator on EasyRefresh.

License Pub

在线演示

在线演示

动画来源：Pull to Refresh

特性

  • 提供 BubblesHeader 和 BubblesFooter。

开始使用

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

dependencies:
  flutter_easyrefresh: ^3.0.0
  easy_refresh_bubbles: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

EasyRefresh(
  header: BubblesHeader(), // 设置下拉刷新头部效果
  footer: BubblesFooter(), // 设置上拉加载更多底部效果
  onRefresh: () async {   // 下拉刷新回调
    await Future.delayed(const Duration(seconds: 4)); // 模拟耗时操作
    if (!mounted) {
      return;
    }
    setState(() {
      _count = 10; // 更新数据
    });
  },
  onLoad: () async {     // 上拉加载更多回调
    await Future.delayed(const Duration(seconds: 4)); // 模拟耗时操作
    if (!mounted) {
      return;
    }
    setState(() {
      _count += 5; // 增加数据
    });
  },
  child: ListView(), // 需要刷新的内容
)

完整示例代码

以下是完整的示例代码，展示了如何使用 easy_refresh_bubbles 插件实现下拉刷新和上拉加载的效果：

import 'package:easy_refresh_bubbles/easy_refresh_bubbles.dart';
import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Bubbles',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 10; // 数据列表的初始数量

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bubbles'), // 设置页面标题
      ),
      body: EasyRefresh( // 使用 EasyRefresh 包裹内容
        header: const BubblesHeader(), // 设置下拉刷新头部效果
        footer: const BubblesFooter(), // 设置上拉加载更多底部效果
        onRefresh: () async { // 下拉刷新回调
          await Future.delayed(const Duration(seconds: 4)); // 模拟耗时操作
          if (!mounted) {
            return;
          }
          setState(() {
            _count = 10; // 更新数据
          });
        },
        onLoad: () async { // 上拉加载更多回调
          await Future.delayed(const Duration(seconds: 4)); // 模拟耗时操作
          if (!mounted) {
            return;
          }
          setState(() {
            _count += 5; // 增加数据
          });
        },
        child: ListView.builder( // 列表视图
          itemBuilder: (context, index) {
            return Card( // 卡片样式
              child: Container(
                alignment: Alignment.center,
                height: 80,
                child: Text('${index + 1}'), // 显示列表项编号
              ),
            );
          },
          itemCount: _count, // 列表项数量
        ),
      ),
    );
  }
}

更多关于Flutter下拉刷新特效插件easy_refresh_bubbles的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉刷新特效插件easy_refresh_bubbles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


easy_refresh_bubbles 是 EasyRefresh 插件库中的一个特效插件，用于在 Flutter 应用中实现带有气泡动画的下拉刷新效果。EasyRefresh 是一个功能强大的 Flutter 下拉刷新和上拉加载库，支持多种自定义效果和配置。

安装

首先，你需要在 pubspec.yaml 文件中添加 easy_refresh 和 easy_refresh_bubbles 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_refresh: ^3.0.0
  easy_refresh_bubbles: ^3.0.0

然后运行 flutter pub get 来安装依赖。

使用步骤

  1. 导入库

    在你的 Dart 文件中导入 easy_refresh 和 easy_refresh_bubbles：

    import 'package:easy_refresh/easy_refresh.dart';
import 'package:easy_refresh_bubbles/easy_refresh_bubbles.dart';

  2. 创建 EasyRefresh 组件

    使用 EasyRefresh 组件包裹你的内容，并配置 header 和 footer 来使用 BubblesHeader 和 BubblesFooter。

    class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final EasyRefreshController _controller = EasyRefreshController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyRefresh Bubbles Example'),
      ),
      body: EasyRefresh(
        controller: _controller,
        header: BubblesHeader(),
        footer: BubblesFooter(),
        onRefresh: () async {
          // 模拟网络请求
          await Future.delayed(Duration(seconds: 2));
          _controller.finishRefresh();
        },
        onLoad: () async {
          // 模拟网络请求
          await Future.delayed(Duration(seconds: 2));
          _controller.finishLoad();
        },
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

  3. 配置 EasyRefreshController

    你可以使用 EasyRefreshController 来控制刷新和加载的状态。例如，在 onRefresh 和 onLoad 回调中，你可以调用 _controller.finishRefresh() 和 _controller.finishLoad() 来结束刷新和加载。

  4. 自定义气泡效果

    BubblesHeader 和 BubblesFooter 提供了一些可配置的参数，例如颜色、大小、速度等。你可以根据需要自定义这些参数：

    header: BubblesHeader(
  color: Colors.blue,
  size: 30.0,
  speed: 1.5,
),
footer: BubblesFooter(
  color: Colors.red,
  size: 30.0,
  speed: 1.5,
),

完整示例

import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:easy_refresh_bubbles/easy_refresh_bubbles.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EasyRefresh Bubbles Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final EasyRefreshController _controller = EasyRefreshController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyRefresh Bubbles Example'),
      ),
      body: EasyRefresh(
        controller: _controller,
        header: BubblesHeader(
          color: Colors.blue,
          size: 30.0,
          speed: 1.5,
        ),
        footer: BubblesFooter(
          color: Colors.red,
          size: 30.0,
          speed: 1.5,
        ),
        onRefresh: () async {
          // 模拟网络请求
          await Future.delayed(Duration(seconds: 2));
          _controller.finishRefresh();
        },
        onLoad: () async {
          // 模拟网络请求
          await Future.delayed(Duration(seconds: 2));
          _controller.finishLoad();
        },
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}
回到顶部