Flutter表格展示插件spread的使用

Flutter表格展示插件Spread的使用

Spread库为Flutter应用程序提供了一种简化状态管理的方式。通过实体（entities）、订阅者（subscribers）和状态发射器（state emitters），开发者可以轻松地存储、观察和操作状态，而无需编写大量的样板代码。

概述

Spread库提供了一种简化的方式来管理Flutter应用中的状态。通过使用实体、订阅者和状态发射器，开发者可以轻松地存储、观察和操作状态，而无需编写大量的样板代码。

特性

• 状态管理：使用标识符、类型或实体来存储状态数据。它类似于具有可观察事件的键值映射。
• Spread小部件：在接收到状态更新时更新UI。
• 观察者：订阅特定的状态变化并相应地作出反应。
• 状态发射器：一种混入类，用于基于类型、名称或实体发射状态更改。
• 用例：使用UseCase类来封装抽象业务或领域逻辑。
• 实体：将UI更改订阅到由类型和ID识别的特定对象实例。

入门

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  spread: ^0.0.8

然后运行以下命令以获取依赖项：

pub get

基本用法

示例1：定义一个实体状态并创建一个Spread小部件

import 'package:spread/spread.dart';

// 定义一个实体类
class User implements Entity {
  final String id;
  final String name;
  final List<UserPost> posts = List.empty(growable: true);

  User({required this.id, required this.name});

  [@override](/user/override)
  String get entityId => id;
}

// 创建一个继承自StatelessWidget的小部件
class UserItem extends StatelessWidget {
  final User user;

  const UserItem({super.key, required this.user});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用Spread小部件订阅用户实体，并根据条件构建UI
    return Spread<User>(
      entity: user,
      stateCondition: (User? entity) => entity!.posts.length.isEven,
      builder: (BuildContext context, User? entity) {
        return Text('- posts: ${entity!.posts.length.toString()}');
      },
    );
  }
}

示例2：定义一个类型化的实体并创建一个Spread小部件

import 'user.dart';

// 定义一个状态接口
abstract class UsersState {}

// 定义具体的状态类
class LoadingUsers extends UsersState {}

class LoadedUsersSuccess extends UsersState {
  final List<User> users;

  LoadedUsersSuccess({required this.users});
}

class LoadedUsersFail extends UsersState {
  final Object? error;
  final StackTrace? stackTrace;

  LoadedUsersFail({required this.error, required this.stackTrace});
}

// 创建一个继承自StatelessWidget的小部件
class UsersPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用Spread小部件订阅状态变化并构建UI
    return Spread<UsersState>(
      builder: (BuildContext context, UsersState? state) {
        if (state == null) {
          return _loading();
        } else {
          switch (state.runtimeType) {
            case LoadedUsersSuccess:
              {
                return _userList(context, state as LoadedUsersSuccess);
              }
            case LoadedUsersFail:
              {
                return _fail(context, state as LoadedUsersFail);
              }
            case LoadingUsers:
            default:
              {
                return _loading();
              }
          }
        }
      },
    );
  }

  // 构建加载状态的UI
  Widget _loading() => const Center(child: CircularProgressIndicator());

  // 构建用户列表状态的UI
  Widget _userList(BuildContext context, LoadedUsersSuccess state) {
    return ListView.builder(
      itemCount: state.users.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(state.users[index].name),
        );
      },
    );
  }

  // 构建失败状态的UI
  Widget _fail(BuildContext context, LoadedUsersFail state) {
    return Center(
      child: Text('Failed to load users: ${state.error}'),
    );
  }
}

示例3：创建一个Spread小部件订阅枚举状态的变化

enum AppState { users, posts }

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用Spread小部件订阅AppState状态变化
    return Spread<AppState>(
      builder: _homeBody,
    );
  }

  // 根据状态构建不同的页面
  Widget _homeBody(BuildContext context, AppState? state) {
    switch (state) {
      case AppState.posts:
        {
          return PostsPage();
        }
      case AppState.users:
      default:
        {
          return UsersPage();
        }
    }
  }
}

发射状态

使用StateEmitter混入类：

import 'package:spread/spread.dart';

class UserManager with StateEmitter {
  // 更新用户状态
  void updateUser(User user) {
    emitEntity<User>(user);
  }
}

观察状态

扩展SpreadObserver类：

import 'package:spread/spread.dart';

class UsersObserver extends SpreadObserver<UsersState> {
  [@override](/user/override)
  onState(UsersState state) {
    print("UsersObserver Observed: ${state.toString()}");
  }
}