Flutter加载状态管理插件pd_load_state的使用

Flutter加载状态管理插件pd_load_state的使用

这是一个针对网络请求的不同状态对应的UI页面封装，对某一个widget快速添加不同请求状态的UI页面，方便快速开发。

安装

要使用此包，请将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  pd_load_state: ^<last version>

执行以下命令以获取依赖项：

flutter pub get

用法

对于使用示例参考/example文件夹中的代码。

引用pd_load_state库：

import 'package:pd_load_state/pd_load_state.dart';

简单的使用

// 如果想让这个组件展示加载状态，可以按照下面的方式实现。
class SimpleExample extends StatefulWidget {
  const SimpleExample({super.key});

  @override
  State<SimpleExample> createState() => _SimpleExampleState();
}

class _SimpleExampleState extends State<SimpleExample> {
  // 初始化组件状态控制对象
  // 控制对象默认会执行加载中状态.
  final PDLoadState loadState = PDLoadState('SimpleExample');

  @override
  Widget build(BuildContext context) {
    // 使用[PDLoadStateLayout]包裹某一个组件.
    return PDLoadStateLayout(
      // 必传 绑定的[PDLoadState] 用来控制组件的状态切换。
      loadState: loadState,
      // 在加载状态时执行的回调, 在这里发送网络请求.
      onLoading: network,
      // 必传 加载状态成功时要执行的函数, 返回一个要展示的ui组件。
      builder: (context) {
        return const Center(
          child: Text('Simple example'),
        );
      },
    );
  }

  /// 模仿一次网络请求。
  void network() {
    Future.delayed(const Duration(seconds: 3)).then((_) {
      if (Random().nextBool()) {
        // 模拟请求成功, loadState.success() 会让页面回到加载成功状态
        // 默认情况下 每次调用这个函数都会刷新[PDLoadStateLayout]包裹的组件
        loadState.success();
      } else {
        loadState.error();
      }
    });
  }
}

组件状态控制对象说明

// 初始化组件状态控制对象
// 控制对象默认会执行加载中状态.
final PDLoadState loadState = PDLoadState('SimpleExample');
// 状态枚举属性
loadState.state;
// 如果是请求错误时的自定义错误文本
loadState.errorMessage;
// 控制对象的身份标识, 用来区分多个组件的状态切换
loadState.identifier;
// 是否刷新[PDLoadStateLayout]包裹的组件.
// 为`true`时, 每次调用函数`loadState.success();`都会刷新[PDLoadStateLayout]包裹的组件
loadState.isRefreshSubviews;

如何切换页面的不同状态?

// 调用函数切换

// 网络请求成功
loadState.success();
// 网络请求失败
loadState.error();
// 网络请求加载中
loadState.loading();

或者用状态枚举直接赋值，内部重写了status的set方法实现刷新:

set status(PDLoadStateEnum newValue) {
    _update(newValue);
}

// 网络请求成功
loadState.state = PDLoadStateStatus.success;
// 网络请求失败
loadState.state = PDLoadStateStatus.error;
// 网络请求加载中
loadState.state = PDLoadStateStatus.loading;
loadState.state = PDLoadStateStatus.reload; // 重新加载

各个状态页面的UI级别说明

示例 Example loadingWidget

通过[PDLoadStateLayout]类中参数loadingWidgetBuilder设置的UI，优先级最高:

PDLoadStateLayout(
  loadState: loadState,
  onLoading: network,
  builder: (context) {
    return const Center();
  },
  /// 优先级最高
  loadingWidgetBuilder: (context) {
    return const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('loading...'),
        ],
      ),
    );
  },
)

PdLoadStateConfigure类配置，设置一次全局使用。优先级中等:

/// 自定义加载中页面
PdLoadStateConfigure.instance.loadingWidgetBuilder = (context) {
   return SizedBox(
     width: MediaQuery.of(context).size.width,
     child: const Center(
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           CircularProgressIndicator(),
           Text('加载中...'),
         ],
       ),
     ),
   );
};

如果上面两种都没有设置，则使用默认加载中页面，优先级最低:

PDLoadStateDefaultWidgets(backgroundColor: backgroundColor).loadingView;