Flutter下拉刷新及深蹲动画插件easy_refresh_squats的使用

Squats Indicator on EasyRefresh.

在线演示

在线演示

动画来源：Lumberjack Squats

特性

• SquatsHeader 和 SquatsFooter。

开始使用

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

dependencies:
  flutter_easy_refresh: version
  easy_refresh_squats: version

使用示例

EasyRefresh(
  header: SquatsHeader(), // 添加深蹲动画的头部
  footer: SquatsFooter(), // 添加深蹲动画的底部
  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_squats 插件实现下拉刷新和上拉加载功能，并带有深蹲动画效果。

import 'package:easy_refresh_squats/easy_refresh_squats.dart'; // 引入 squats 插件
import 'package:flutter/material.dart'; // 引入 Flutter 基础库
import 'package:easy_refresh/easy_refresh.dart'; // 引入 easy_refresh 主库

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( // 创建 Material 应用
      title: 'Squats', // 应用标题
      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('Squats'), // 标题
      ),
      body: EasyRefresh( // 易刷新控件
        header: const SquatsHeader(), // 添加深蹲动画的头部
        footer: const SquatsFooter(), // 添加深蹲动画的底部
        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, // 数据数量
        ),
      ),
    );
  }
}