Flutter Riverpod AsyncNotifier中列表重排的状态与数据库同步方案选型

两种现有方案的问题 #

• 方案1（先更新状态再同步数据库）：用户体验流畅（无列表闪烁），但存在数据一致性风险——如果数据库更新失败（比如IO异常、事务冲突），内存状态会和数据库数据脱节，后续重新加载数据时会出现“排序回退”的情况，容易让用户困惑。
• 方案2（先更新数据库再刷新状态）：能严格保证数据一致性，但需要全量查询数据库并替换内存状态，不仅浪费性能，还会触发ListView全量重渲染，导致条目闪烁，体验很差。

推荐的替代方案：乐观更新+异步持久化+失败回滚 #

核心思路是优先保障用户体验，后台异步处理数据同步，同步失败时回滚状态，具体步骤：

1. 立即更新内存状态：用户触发重排操作时，先修改AsyncNotifier中的内存数据，ListView会实时刷新，无闪烁卡顿。
2. 异步执行数据库同步：在后台线程执行数据库的重排逻辑（比如批量更新条目的position字段），不阻塞UI。
3. 处理同步失败场景：如果数据库更新抛出异常，将内存状态回滚到更新前的版本，同时给用户提示“排序保存失败”。

Drift+Riverpod的伪代码示例 #

class ItemNotifier extends AsyncNotifier<List<Item>> {
  List<Item>? _previousState; // 保存更新前的快照，用于回滚

  @override
  Future<List<Item>> build() async {
    // 从数据库加载初始排序的条目
    return await ref.read(databaseProvider).getItemsOrderedByPosition();
  }

  Future<void> reorderItems(int oldIndex, int newIndex) async {
    _previousState = state.valueOrNull?.toList();
    if (_previousState == null) return;

    // 1. 立即更新内存状态，刷新UI
    final newList = List<Item>.from(_previousState!);
    final movedItem = newList.removeAt(oldIndex);
    newList.insert(newIndex, movedItem);
    state = AsyncData(newList);

    try {
      // 2. 异步批量更新数据库（用事务保证原子性）
      final db = ref.read(databaseProvider);
      await db.transaction((txn) async {
        // 更新被移动条目的位置
        await txn.updateItemPosition(movedItem.id, newIndex);
        // 批量调整中间条目的位置
        if (oldIndex < newIndex) {
          for (int i = oldIndex; i < newIndex; i++) {
            await txn.updateItemPosition(newList[i].id, i);
          }
        } else {
          for (int i = newIndex; i < oldIndex; i++) {
            await txn.updateItemPosition(newList[i].id, i + 1);
          }
        }
      });
    } catch (e) {
      // 3. 同步失败，回滚状态并提示用户
      if (_previousState != null) {
        state = AsyncData(_previousState!);
      }
      ScaffoldMessenger.of(navigatorKey.currentContext!).showSnackBar(
        SnackBar(content: Text('排序保存失败：${e.toString()}')),
      );
    } finally {
      _previousState = null;
    }
  }
}

额外优化建议 #

• 用AnimatedList替代普通ListView：重排时添加过渡动画，即使出现状态回滚，用户感知也更自然。
• 合并频繁操作：如果用户快速连续重排，可防抖合并多次操作，减少数据库同步次数。
• 优化数据库查询：避免全量查询，可通过监听数据库的position字段变化局部更新状态（部分ORM框架支持流式查询）。

内容的提问来源于stack exchange，提问作者Mike