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

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

Halloween Indicator 在 EasyRefresh 中的使用 #

License Pub

在线演示 #

动画来自 万圣节下拉刷新效果

特性 #

HalloweenHeader 和 HalloweenFooter。

开始使用 #

dependencies:
  flutter_easyrefresh: version
  easy_refresh_halloween: version

使用方法 #

EasyRefresh(
  header: HalloweenHeader(),
  footer: HalloweenFooter(),
  onRefresh: () async {},
  onLoad: () async {},
  child: ListView(),
)

完整示例 Demo

example/main.dart

import 'package:easy_refresh_halloween/easy_refresh_halloween.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: 'Halloween',
      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('Halloween'),
      ),
      body: EasyRefresh(
        header: const HalloweenHeader(), // 设置顶部下拉刷新指示器
        footer: const HalloweenFooter(), // 设置底部加载更多指示器
        onRefresh: () async {
          await Future.delayed(const Duration(seconds: 4)); // 模拟刷新耗时
          if (!mounted) {
            return;
          }
          setState(() {
            _count = 10; // 刷新后数据重置为10
          });
        },
        onLoad: () async {
          await Future.delayed(const Duration(seconds: 4)); // 模拟加载更多耗时
          if (!mounted) {
            return;
          }
          setState(() {
            _count += 5; // 加载更多后数据增加5
          });
        },
        child: ListView.builder( // 使用ListView展示数据
          itemBuilder: (context, index) {
            return Card(
              child: Container(
                alignment: Alignment.center,
                height: 80,
                child: Text('${index + 1}'), // 显示列表项编号
              ),
            );
          },
          itemCount: _count, // 根据当前数据数量设置列表长度
        ),
      ),
    );
  }
}

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

1 回复

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


easy_refresh_halloween 是 easy_refresh 插件的一个自定义主题包，专门为万圣节设计。它提供了万圣节风格的下拉刷新和上拉加载效果，非常适合在万圣节期间为你的 Flutter 应用增添节日氛围。

安装

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

dependencies:
  flutter:
    sdk: flutter
  easy_refresh: ^3.0.0
  easy_refresh_halloween: ^3.0.0

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

基本使用

安装完成后，你可以在 Flutter 应用中使用 EasyRefresh 并设置 HalloweenHeader 和 HalloweenFooter 来实现万圣节风格的下拉刷新和上拉加载效果。

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

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

class _HalloweenRefreshExampleState extends State<HalloweenRefreshExample> {
  EasyRefreshController _controller = EasyRefreshController();
  List<String> _items = List.generate(20, (index) => 'Item $index');

  Future<void> _onRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _items = List.generate(20, (index) => 'Refreshed Item $index');
    });
    _controller.finishRefresh();
  }

  Future<void> _onLoad() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _items.addAll(List.generate(10, (index) => 'Loaded Item ${_items.length + index}'));
    });
    _controller.finishLoad();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halloween Refresh Example'),
      ),
      body: EasyRefresh(
        controller: _controller,
        header: HalloweenHeader(),
        footer: HalloweenFooter(),
        onRefresh: _onRefresh,
        onLoad: _onLoad,
        child: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_items[index]),
            );
          },
        ),
      ),
    );
  }
}
回到顶部