Flutter自定义Hooks插件forui_hooks的使用

forui_hooks 是一个为 Flutter 提供的自定义 Hooks 插件，旨在简化状态管理和提高代码的可读性。它基于 flutter_hooks 库，允许开发者使用 Hooks 来管理组件的状态和生命周期。

以下是如何使用 forui_hooks 插件的基本步骤和示例：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  forui_hooks: ^1.0.0

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

2. 使用 forui_hooks 中的 Hooks

forui_hooks 提供了一些自定义的 Hooks，你可以直接在组件中使用它们。以下是一些常见的用法示例：

示例 1: 使用 useState

useState 是 flutter_hooks 中的一个基本 Hook，用于在函数组件中管理状态。

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

class CounterApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('${counter.value}', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

示例 2: 使用 useEffect

useEffect 用于处理副作用，比如在组件挂载或更新时执行某些操作。

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

class TimerApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final seconds = useState(0);

    useEffect(() {
      final timer = Timer.periodic(Duration(seconds: 1), (_) {
        seconds.value++;
      });

      return timer.cancel; // Cleanup on dispose
    }, []);

    return Scaffold(
      appBar: AppBar(title: Text('Timer App')),
      body: Center(
        child: Text('Seconds elapsed: ${seconds.value}'),
      ),
    );
  }
}

示例 3: 使用 useMemoized

useMemoized 用于缓存计算结果，避免不必要的重复计算。

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

class FibonacciApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final n = useState(10);
    final result = useMemoized(() => fibonacci(n.value), [n.value]);

    return Scaffold(
      appBar: AppBar(title: Text('Fibonacci App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Fibonacci(${n.value}) = $result'),
            Slider(
              value: n.value.toDouble(),
              min: 0,
              max: 40,
              onChanged: (value) => n.value = value.toInt(),
            ),
          ],
        ),
      ),
    );
  }

  int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

3. 自定义 Hooks

你也可以创建自己的自定义 Hooks，以便在多个组件中复用逻辑。

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

class UseToggle {
  final bool value;
  final VoidCallback toggle;

  UseToggle(this.value, this.toggle);
}

UseToggle useToggle(bool initialValue) {
  final value = useState(initialValue);

  void toggle() {
    value.value = !value.value;
  }

  return UseToggle(value.value, toggle);
}

class ToggleApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final toggle = useToggle(false);

    return Scaffold(
      appBar: AppBar(title: Text('Toggle App')),
      body: Center(
        child: Switch(
          value: toggle.value,
          onChanged: (_) => toggle.toggle(),
        ),
      ),
    );
  }
}