Flutter之Riverpod列表封装实战，轻松搞定列表加载、分页、错误处理等场景

Android

2024-02-09 09:28:35

使用 Riverpod 封装 Flutter 列表

理解 Riverpod 的力量

Riverpod 是一个状态管理库，它提供了一个响应式 API，使开发者能够轻松管理其应用程序的状态。通过利用 Riverpod 的 ProviderListener，我们可以根据状态的变化动态更新我们的列表 UI。

封装的通用组件

为了解决不同类型的列表需求，我们封装了以下通用组件：

Stream 异步加载数据列表： 用于从流式数据源加载数据。
ChangeNotifierProvider 数据加载列表： 用于从 ChangeNotifierProvider 加载数据。
RiverpodProvider 数据加载列表： 用于从 RiverpodProvider 加载数据。
LoadMore 组件： 用于实现列表的加载更多功能。
Empty 组件： 用于在列表为空时显示。
Error 组件： 用于在发生错误时显示。
Loading 组件： 用于在加载数据时显示。

核心封装函数

封装的关键在于 _buildProvider 和 _buildListener 函数，它们负责处理状态变化并相应地更新 UI。

优势

将这些组件封装成一个轻量级的库具有以下优势：

理解 Flutter 框架封装思想： 通过动手封装组件，我们可以加深对 Flutter 架构的理解。
深入理解 Riverpod 状态管理： 封装过程要求我们对 Riverpod 的工作原理有深入的了解。
组件更轻量，代码可读性好，方便二次开发： 封装后的组件易于使用和定制，为二次开发提供了便利。

示例用法

使用这些封装的组件非常简单。以下是一个 Riverpod provider 的示例：

ProviderListener(
  provider: statusProvider,
  listener: (context, status) {
    switch (status) {
      case AppStatus.loading:
        Loading();
        break;
      case AppStatus.empty:
        Empty();
        break;
      case AppStatus.error:
        Error();
        break;
      case AppStatus.success:
        ListView.separated(
          itemCount: list.length,
          itemBuilder: (context, index) => Column(
            children: [
              Text(list[index].name),
            ],
          ),
          separatorBuilder: (context, index) => Divider(),
        );
        break;
    }
  },
  child: Column(
    children: [],
  ),
);