Flutter扩展钩子功能插件flutter_hooks_extra的使用

flutter_hooks_extra

自定义钩子，基于flutter_hooks提供更高的可重用性。

useFutureState

管理异步数据的钩子。

useDebounceState

处理防抖值的钩子。

useEmitter

在多个小部件之间传递事件。通过使用useEmitter，可以简化这一过程。

useCounter

用于管理计数的钩子。

useCountdown

用于倒计时管理的钩子。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_hooks_extra/flutter_hooks_extra.dart';

// 模拟一个异步请求
Future _queryUserInfo(dynamic params) async {
  await Future.delayed(const Duration(milliseconds: 1000));
  return {'name': 'Tom', 'id': '$params'};
}

/// 使用useFutureState的示例
class HooksUseFutureStateDemo extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用useFutureState管理异步请求
    final queryUserInfoFuture = useFutureState(
      _queryUserInfo,
      options: FutureHookOptions(
        defaultParams: 1,
        loadingDelay: 3000,
      ),
    );

    return MaterialApp(
      title: 'HooksUseFutureStateDemo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HooksUseFutureStateDemo'),
        ),
        body: Column(
          children: [
            if (queryUserInfoFuture.loading)
              const Text('loading')
            else
              Column(
                children: [
                  Text('${queryUserInfoFuture.data}'), // 显示请求结果
                  TextButton(
                    onPressed: () {
                      queryUserInfoFuture.run(2); // 刷新请求参数
                    },
                    child: const Text('user id: 2'),
                  ),
                ],
              ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => queryUserInfoFuture.refresh(), // 手动刷新
          child: const Text('refresh'),
        ),
      ),
    );
  }
}

/// 使用useDebounceState的示例
class HooksUseDebounceStateDemo extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用useDebounceState处理防抖逻辑
    final debouncedValue = useDebounceState(0);

    return MaterialApp(
      title: 'HooksUseDebounceStateDemo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HooksUseDebounceStateDemo'),
        ),
        body: Column(
          children: [Text('${debouncedValue.value}')], // 显示当前值
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            debouncedValue.value++; // 更新值
          },
          child: const Text('increment'),
        ),
      ),
    );
  }
}

/// 使用useEmitter的示例
class HooksUseEmitterDemo extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用useEmitter传递事件
    final emitter = useEmitter('demo');
    final num = useState(0);

    void addNumHandler(step) {
      num.value += step;
    }

    useEffect(() {
      // 添加事件监听器
      emitter.once('addNum', addNumHandler);
      return () {
        // 清除事件监听器
        emitter.off('addNum');
      };
    }, []);

    return MaterialApp(
      title: 'HooksUseEmitterDemo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HooksUseEmitterDemo'),
        ),
        body: Column(
          children: [Text('${num.value}')], // 显示当前值
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            emitter.emit('addNum', 2); // 触发事件
          },
          child: const Text('emit'),
        ),
      ),
    );
  }
}

/// 使用useCounter的示例
class HooksUseCounterDemo extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用useCounter管理计数
    final counter = useCounter(0, step: 2, max: 10);

    return MaterialApp(
      title: 'HooksUseCounterDemo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HooksUseCounterDemo'),
        ),
        body: Column(
          children: [
            Text('${counter.current}'), // 显示当前计数值
            TextButton(
              onPressed: counter.reset, // 重置计数
              child: const Text('Reset'),
            )
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.inc, // 增加计数
          child: const Text('increment'),
        ),
      ),
    );
  }
}

/// 使用useCountdown的示例
class HooksUseCountDownDemo extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用useCountdown管理倒计时
    final countdown = useCountdown(DateTime(2022, 6, 30), onEnd: () {
      print('timesup!');
    });

    return MaterialApp(
      title: 'HooksUseCountDownDemo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HooksUseCountDownDemo'),
        ),
        body: Column(
          children: [
            Text(
              '${countdown.formattedResult.days} / ${countdown.formattedResult.hours}:${countdown.formattedResult.minutes}:${countdown.formattedResult.seconds}',
            ), // 显示倒计时
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            countdown.setTarget(DateTime.now()); // 重新设置目标时间
          },
          child: const Text('End'),
        ),
      ),
    );
  }
}

void main() {
  runApp(HooksUseCountDownDemo());
  // runApp(HooksUseCounterDemo());
  // runApp(HooksUseEmitterDemo());
  // runApp(HooksUseDebounceStateDemo());
  // runApp(HooksUseFutureStateDemo());
}