riverpod-pull-to-refresh

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Riverpod — Pull-to-refresh

Riverpod — 下拉刷新

Instructions

说明

Riverpod fits pull-to-refresh well: refresh by invalidating the provider and let AsyncValue handle loading vs data vs error.

Riverpod非常适合实现下拉刷新：通过使provider失效来触发刷新，让AsyncValue处理加载、数据展示和错误状态。

1. Provider and UI

1. Provider与UI

Define an async provider (e.g. FutureProvider or AsyncNotifierProvider) that fetches data. Display it with ref.watch(provider) so you get an AsyncValue.

定义一个用于获取数据的异步provider（例如FutureProvider或AsyncNotifierProvider）。使用ref.watch(provider)来监听它，从而获取AsyncValue对象。

2. RefreshIndicator

Wrap your scrollable (ListView, SingleChildScrollView, etc.) in RefreshIndicator. In onRefresh, call ref.refresh(provider.future) so the indicator stays until the new data is loaded:

dart

RefreshIndicator(
  onRefresh: () => ref.refresh(activityProvider.future),
  child: ListView(
    children: [
      // content
    ],
  ),
)

将可滚动组件（如ListView、SingleChildScrollView等）包裹在RefreshIndicator中。在onRefresh回调中调用ref.refresh(provider.future)，这样刷新指示器会一直显示直到新数据加载完成：

dart

RefreshIndicator(
  onRefresh: () => ref.refresh(activityProvider.future),
  child: ListView(
    children: [
      // content
    ],
  ),
)

3. Loading and error states

3. 加载与错误状态

Use AsyncValue pattern matching:

Initial load: No data and no error → show full-screen spinner.
Refresh: Show the refresh indicator and keep showing previous data (or previous error) until the new result arrives.
Data:
```
AsyncValue(:final value?)
```
or similar to show the value.
Error:
```
AsyncValue(:final error?)
```
to show the error.

Example (syntax may vary by Riverpod version):

dart

final activity = ref.watch(activityProvider);
switch (activity) {
  AsyncValue<Activity>(:final value?) => Text(value.activity),
  AsyncValue(:final error?) => Text('Error: $error'),
  _ => const CircularProgressIndicator(),
}

Use valueOrNull (or equivalent) if your API exposes it for nullable data. See the docs for the exact AsyncValue API in your version.

运用AsyncValue模式匹配：

初始加载：无数据且无错误 → 显示全屏加载动画。
刷新中：显示刷新指示器，同时保留展示旧数据（或之前的错误信息）直到新结果返回。
数据加载成功：
```
AsyncValue(:final value?)
```
或类似语法展示数据。
加载错误：
```
AsyncValue(:final error?)
```
展示错误信息。

示例（语法可能因Riverpod版本而异）：

dart

final activity = ref.watch(activityProvider);
switch (activity) {
  AsyncValue<Activity>(:final value?) => Text(value.activity),
  AsyncValue(:final error?) => Text('Error: $error'),
  _ => const CircularProgressIndicator(),
}

如果你的API支持空值数据，可以使用valueOrNull（或等效方法）。请查阅对应Riverpod版本的文档获取AsyncValue的准确API。