关于 riverpod-pull-to-refresh
此 Riverpod 技能介绍如何使用异步 Provider 实现下拉刷新，包括刷新 Provider 的 Future，以及通过 AsyncValue 展示加载、已有数据和错误状态。
主要功能
- 01配置异步 Provider
- 02集成 RefreshIndicator
- 03刷新 Provider 的 Future
- 04处理 AsyncValue 状态
适用场景
- 01为可滚动列表添加下拉刷新
- 02刷新时保留已有数据
- 03展示获取数据时的加载与错误状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/riverpod-pull-to-refresh确认已加载。
详细介绍
Riverpod — 下拉刷新
说明
Riverpod 很适合实现下拉刷新：通过使 provider 失效来刷新，并让 AsyncValue 处理加载、数据和错误状态。
1. Provider 和 UI
定义一个异步 provider（例如 FutureProvider 或 AsyncNotifierProvider）来获取数据。使用 ref.watch(provider) 显示数据，这样你就能获得一个 AsyncValue。
2. RefreshIndicator
将可滚动组件（ListView、SingleChildScrollView 等）包裹在 RefreshIndicator 中。在 onRefresh 中调用 ref.refresh(provider.future)，这样刷新指示器会一直显示，直到加载到新数据：
RefreshIndicator(
onRefresh: () => ref.refresh(activityProvider.future),
child: ListView(
children: [
// content
],
),
)
3. 加载和错误状态
使用 AsyncValue 模式匹配：
- 初始加载： 没有数据且没有错误 → 显示全屏加载指示器。
- 刷新： 显示刷新指示器，并继续显示先前的数据（或先前的错误），直到新结果到达。
- 数据： 使用
AsyncValue(:final value?)或类似方式显示数据。 - 错误： 使用
AsyncValue(:final error?)显示错误。
示例（语法可能因 Riverpod 版本而异）：
final activity = ref.watch(activityProvider);
switch (activity) {
AsyncValue<Activity>(:final value?) => Text(value.activity),
AsyncValue(:final error?) => Text('Error: $error'),
_ => const CircularProgressIndicator(),
}
如果你的 API 提供了 valueOrNull（或等效方法）来处理可空数据，请使用它。有关你所用版本中 AsyncValue API 的确切信息，请参阅文档。
评论
支持 Markdown