mcpField
R
riverpod-codegen-and-hooks

riverpod-codegen-and-hooks

github.com/serverpod开发10117 次安装34 周前更新
代码仓库

关于 riverpod-codegen-and-hooks

riverpod-codegen-and-hooks 介绍 Riverpod 的可选代码生成与 Flutter hooks，面向 Flutter 开发者。内容涵盖 provider 语法、异步状态，以及在组件中结合 hooks 与 Riverpod。

主要功能

  1. 01用注解函数或类定义 provider
  2. 02推断 provider 类型并支持参数
  3. 03处理异步值与自动销毁
  4. 04用 hooks 管理组件局部状态
  5. 05在组件中结合 hooks 与 Riverpod

适用场景

  1. 01判断是否采用 Riverpod 代码生成
  2. 02创建带参数的异步 provider
  3. 03管理 Flutter 组件的局部状态
  4. 04在 Riverpod provider 中搭配 hooks

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-codegen-and-hooks

安装后在 Claude Code 中输入/riverpod-codegen-and-hooks确认已加载。

详细介绍

Riverpod — 代码生成与 Hooks

代码生成

在 Riverpod 中，代码生成是可选的。它会改变定义 Provider 的语法：编写带注解的函数或类，再由生成器生成 Provider。如果你已经在使用代码生成（例如 Freezed、json_serializable），可以采用这种方式；否则，额外的构建步骤可能不值得。有关设置（build_runner、riverpod_generator），请参阅 riverpod-getting-started。

优点
  • 语法更清晰：无需手动指定 Provider 类型（Provider、FutureProvider 等）；Riverpod 会自动推断。
  • 参数：支持任意参数（命名参数、可选参数、默认值），而不是单个 family 参数。
  • Riverpod 代码支持有状态热重载。
  • 通过生成的元数据实现更好的调试体验。
语法

函数式 Provider（同步）：

@riverpod
String example(Ref ref) {
  return 'foo';
}

基于类的 Provider（同步，可使用方法执行副作用）：

@riverpod
class Example extends _$Example {
  @override
  String build() => 'foo';
  // Add methods to mutate state
}

**异步：**使用 Future/FutureOr/Stream；异步函数会自动获得 AsyncValue，以及加载和错误处理。**自动销毁：**在代码生成中默认启用。使用 @Riverpod(keepAlive: true) 禁用。

@riverpod
String example1(Ref ref) => 'foo';

@Riverpod(keepAlive: true)
String example2(Ref ref) => 'foo';

**参数：**为函数添加参数（非空参数为必需参数）：

@riverpod
Future<User> fetchUser(Ref ref, {required int userId}) async {
  final json = await http.get('api/user/$userId');
  return User.fromJson(json);
}

手动实现的等效写法是 FutureProvider.autoDispose.family<User, int>(...)。有关相关概念，请参阅 riverpod-providers 和 riverpod-family。

Hooks

Hooks 来自 [flutter_hooks]（与 Riverpod 分开）。它们用于管理组件的本地状态（例如 TextEditingController、AnimationController），可替代 StatefulWidget 或嵌套 builder。只有在你想使用 Hooks 时才使用；Riverpod 并不要求使用 Hooks。初学者最好先不要使用 Hooks。

同时使用 Hooks 和 Riverpod

你需要同时安装 flutter_hooks 和 hooks_riverpod。然后选择以下一种方式：

选项 1：HookConsumerWidget — 支持 Hooks 和 ref 的基类：

class Example extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useState(0);
    final value = ref.watch(myProvider);
    return Text('Hello $counter $value');
  }
}

选项 2：HookConsumer — 将 HookBuilder 和 Consumer 组合起来的 builder（仅使用 flutter_riverpod 时需要嵌套二者；hooks_riverpod 提供了 HookConsumer）：

return HookConsumer(
  builder: (context, ref, child) {
    final counter = useState(0);
    final value = ref.watch(myProvider);
    return Text('Hello $counter $value');
  },
);

**选项 3：**嵌套使用 Consumer 和 HookBuilder（无需 hooks_riverpod）。

Hooks 规则
  • 仅在继承 HookWidget（或 HookConsumerWidget）的组件的 build 方法中使用 Hooks。
  • 不要在条件语句或循环中使用 Hooks；调用顺序必须稳定。

有关组件中的 Ref，请参阅 riverpod-consumers；有关代码生成和 Hooks 的完整说明，请参阅官方文档。

评论

支持 Markdown