Flutter插件flutter_fc的介绍与使用_flutter_fc是一个在 Flutter 中创建功能性组件的简单方法，具有可组合的钩子

Flutter插件flutter_fc简介

flutter_fc 是一个在 Flutter 中创建功能性组件（Functional Component, FC）的简单方法，具有可组合的钩子（hooks）。这些组件已经部署在一些生产应用中，并旨在节省开发时间。

Flutter插件flutter_fc特性

• ⏱️ 不需要生成代码
• 🖨️ 不需要冗长的 StatefulWidget 和 State<XXX> 类
• 📄 极小的实现且没有外部依赖
• 🪝 内置强大的可组合钩子
• 🐇 提高开发速度
• 🎯 关注性能优化
• 🧱 支持热重载
• ⚛️ 类似 React 的友好风格

Flutter插件flutter_fc安装

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

dependencies:
  flutter_fc: ^1.0.0

快速开始

Flutter插件flutter_fc基本用法

无需创建 StatefulWidget 类和对应的 State 类。

class Counter extends FCWidget {
  const Counter({super.key});

  @override
  Widget build(BuildContext context) {
    final (counter, setCounter) = useState(0);
    return ElevatedButton(
      onPressed: () => setCounter(counter + 1),
      child: Text("Counter: $counter"),
    );
  }
}

动态创建临时组件类型（不推荐）

final Counter = defineFC((context, props) {
  final (counter, setCounter) = useState(0);
  return ElevatedButton(
    onPressed: () => setCounter(counter + 1),
    child: Text("Counter: $counter"),
  );
});

使用钩子

useState

useState 可以创建或恢复带有初始值的状态，并返回一个更新和重建的函数。

final (loading, setLoading) = useState(false);

如果只想触发重建，可以使用 useSetState。

final update = useSetState();

update(); // 触发重建

useIsMounted

useIsMounted 返回一个函数，调用它可以检查元素是否已挂载。

final isMounted = useIsMounted();

Timer(const Duration(seconds: 3), () {
  if (isMounted()) {
    // 元素仍然存在
  }
});

useElement

useElement 获取当前正在构建的元素。它继承自 BuildContext，因此可以直接获取主题和导航器。

final context = useElement();
final theme = Theme.of(context);
final navigator = Navigator.of(context);

useDidChangeDependencies

useDidChangeDependencies 在元素的依赖项发生变化时执行回调。

useReassemble

useReassemble 在元素接收到重组指令时执行回调。

useReassemble(() => textController.clear());

useDispose

useDispose 在元素卸载前执行回调。

final timer = useMemo(() => Timer(...));
useDispose(timer.cancel);

useDiff

useDiff 在依赖项与之前不同步时执行回调。

final (flag, setFlag) = useState(false);
useDiff(() {
  print("Flag is changed to: $flag");

  // 不要在此处触发更新 setFlag(false);
}, [flag]);

useMemo

useMemo 给定一个工厂函数来创建值，在每次构建时都返回相同的对象，直到依赖项发生变化。

final (percent, setPercent) = useState(20);
final prettierPercent = useMemo(() => "${percent} %", [percent]);

useRef

useRef 创建或恢复一个存储在 Ref 中的初始值，只持有该值。

final timerRef = useRef<Timer>(); // 可空

final flagRef = useRefMust(false); // 不可空

useValue

useValue 创建或恢复一个存储在 ValueNotifier 中的初始值，当其值发生变化时会更新监听器。

final loading = useValue(() => false);

setLoading(bool newValue) => loading.value = newValue;

return ValueListenableBuilder(
  valueListenable: loading,
  builder: (context, flag, child) =>
    flag
      ? const Text("Loading")
      : const SizedBox(),
);

useDisposable

useDisposable 创建或恢复一个可丢弃的实例。如果该实例继承自 ChangeNotifier 或 StreamSink，则可以在销毁时调用 .disposed() 方法。

// 自动在卸载时销毁
final controller = useDisposable(() => TextEditingController());