Flutter状态管理插件state_widget的使用

StateWidget 组件是一个通用的状态布局组件，可以根据不同的状态（如加载、加载失败、空数据等）显示不同的布局。

使用

要使用 StateWidget 组件，需要提供以下参数：

• stateType: 状态布局类型，枚举为 StateType，包括以下值：
  • loading: 加载状态
  • empty: 空数据状态
  • error: 加载失败状态
  • success: 内容显示状态
• message: 当状态布局类型为 empty 或 error 时，可以传递一个文本消息来描述具体的状态信息。
• onRetry: 当状态布局类型为 error 时，可以传递一个回调函数来重试加载数据。
• child: 当状态布局类型为 success 时，需要传递一个子组件来显示内容。

示例代码：

// 直接使用
StateWidget(
  stateType: stateType,
  loadingWidgetBuilder: (_, __) => const Text('Loading'),
  emptyWidgetBuilder: (message, __) => const Text('Empty'),
  errorWidgetBuilder: (message, onRetry) => TextButton(
    onPressed: onRetry,
    child: const Text("Click to Retry"),
  ),
  onRetry: () {
    // 重试
    setState(() {
      stateType = StateType.loading;
    });
  },
  message: "提示信息",
  child: const Text('Hello World'),
);

// 使用扩展函数 .state 构建
Text('Hello World').state(
  stateType: stateType,
  loadingWidgetBuilder: (_, __) => const Text('Loading'),
  emptyWidgetBuilder: (message, __) => const Text('Empty'),
  errorWidgetBuilder: (message, onRetry) => TextButton(
    onPressed: onRetry,
    child: const Text("Click to Retry"),
  ),
  onRetry: () {
    // 重试
    setState(() {
      stateType = StateType.loading;
    });
  },
  message: "提示信息");

全局配置

StateWidget 组件的全局配置可以通过以下方式设置：

// 全局初始化状态布局
StateWidget.config(
  errorWidgetBuilder: (String? message, VoidCallback? onRetry) => Column(
    children: [
      Text(message ?? "Error"),
      TextButton(onPressed: onRetry, child: const Text("点击重试"))
    ],
  ),
  emptyWidgetBuilder: (String? message, VoidCallback? onRetry) => Text(message ?? "Empty"),
  loadingWidgetBuilder: (String? message, VoidCallback? onRetry) => Text(message ?? "Loading"),
);

StateWidgetConfig 是一个包含以下参数的配置类：

• emptyWidgetBuilder: 自定义组件用于构建空数据状态。
• errorWidgetBuilder: 自定义组件用于构建加载失败状态。
• loadingWidgetBuilder: 自定义组件用于构建加载状态。

配置优先级

本地配置 > 全局配置

完整示例

import 'package:flutter/material.dart';
import 'package:state_widget/state_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 全局初始化状态布局
    StateWidget.config(
      errorWidgetBuilder: (String? message, VoidCallback? onRetry) => Column(
        children: [
          Text(message ?? "Error"),
          TextButton(onPressed: onRetry, child: const Text("点击重试"))
        ],
      ),
      emptyWidgetBuilder: (String? message, VoidCallback? onRetry) => Text(message ?? "Empty"),
      loadingWidgetBuilder: (String? message, VoidCallback? onRetry) => Text(message ?? "Loading"),
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var stateType = StateType.loading;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              setState(() {
                stateType = StateType.success;
              });
            },
            tooltip: 'Success',
            child: Text("Success"),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                stateType = StateType.error;
              });
            },
            tooltip: 'Error',
            child: Text("Error"),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                stateType = StateType.loading;
              });
            },
            tooltip: 'Loading',
            child: Text("Loading"),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                stateType = StateType.empty;
              });
            },
            tooltip: 'empty',
            child: Text("empty"),
          ),
        ],
      ),
    );
  }

  _buildBody() {
    return Center(
      child: Text('Hello World').state(
        stateType: stateType,
        loadingWidgetBuilder: (_, __) => const Text('Loading'),
        emptyWidgetBuilder: (message, __) => const Text('Empty'),
        errorWidgetBuilder: (message, onRetry) => TextButton(
          onPressed: onRetry,
          child: const Text("retry"),
        ),
        onRetry: () {
          // 重试
          setState(() {
            stateType = StateType.loading;
          });
        },
        message: "提示信息",
      ),
    );
  }
}