Flutter Bloc单页多事件状态使用及切换时数据留存问题咨询

一、单页面中使用Bloc多事件与状态的步骤 #

1. 定义事件类 #

创建抽象事件基类，所有业务事件继承该类，区分不同操作：

abstract class AppEvent {}

// 加载用户事件
class LoadUser extends AppEvent {
  final int userId;
  LoadUser(this.userId);
}

// 更新设置事件
class UpdateSettings extends AppEvent {
  final bool darkMode;
  UpdateSettings(this.darkMode);
}

// 获取帖子事件
class FetchPosts extends AppEvent {}

2. 设计包含全量数据的状态类 #

状态类需要包含页面所有需要展示的数据字段，同时提供copyWith方法用于局部更新，避免丢失前序数据：

class AppState {
  final User? user; // 前序加载的用户数据
  final bool darkMode; // 前序更新的设置
  final List<Post> posts; // 前序加载的帖子数据
  final bool isLoading; // 全局加载状态

  AppState({
    this.user,
    this.darkMode = false,
    this.posts = const [],
    this.isLoading = false,
  });

  // 复制当前状态，仅更新指定字段
  AppState copyWith({
    User? user,
    bool? darkMode,
    List<Post>? posts,
    bool? isLoading,
  }) {
    return AppState(
      user: user ?? this.user,
      darkMode: darkMode ?? this.darkMode,
      posts: posts ?? this.posts,
      isLoading: isLoading ?? this.isLoading,
    );
  }
}

3. 实现Bloc事件处理逻辑 #

在Bloc中监听每个事件，基于当前状态的副本更新对应字段后，发射新状态：

class AppBloc extends Bloc<AppEvent, AppState> {
  AppBloc() : super(AppState()) {
    // 处理加载用户事件
    on<LoadUser>((event, emit) async {
      emit(state.copyWith(isLoading: true));
      // 模拟API请求
      final User user = await _fetchUser(event.userId);
      emit(state.copyWith(user: user, isLoading: false));
    });

    // 处理更新设置事件
    on<UpdateSettings>((event, emit) {
      emit(state.copyWith(darkMode: event.darkMode));
    });

    // 处理获取帖子事件
    on<FetchPosts>((event, emit) async {
      emit(state.copyWith(isLoading: true));
      final List<Post> posts = await _fetchPosts();
      emit(state.copyWith(posts: posts, isLoading: false));
    });
  }

  // 模拟API请求方法
  Future<User> _fetchUser(int id) async {
    await Future.delayed(Duration(seconds: 1));
    return User(id: id, name: '用户$id');
  }

  Future<List<Post>> _fetchPosts() async {
    await Future.delayed(Duration(seconds: 1));
    return List.generate(3, (index) => Post(title: '帖子${index+1}'));
  }
}

// 模拟数据模型
class User {
  final int id;
  final String name;
  User({required this.id, required this.name});
}

class Post {
  final String title;
  Post({required this.title});
}

4. 页面中集成Bloc并渲染UI #

通过BlocProvider提供Bloc实例，使用BlocBuilder监听状态变化，根据状态展示对应数据：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => AppBloc(),
      child: Scaffold(
        appBar: AppBar(title: const Text('Bloc多事件示例')),
        body: BlocBuilder<AppBloc, AppState>(
          builder: (context, state) {
            if (state.isLoading) {
              return const Center(child: CircularProgressIndicator());
            }
            return SingleChildScrollView(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 展示用户数据
                  if (state.user != null)
                    Text('已加载用户: ${state.user!.name}', style: const TextStyle(fontSize: 18)),
                  const SizedBox(height: 16),
                  // 展示暗黑模式设置
                  SwitchListTile(
                    title: const Text('暗黑模式'),
                    value: state.darkMode,
                    onChanged: (val) => context.read<AppBloc>().add(UpdateSettings(val)),
                  ),
                  const SizedBox(height: 16),
                  // 展示帖子列表
                  const Text('帖子列表:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                  ...state.posts.map((post) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4),
                    child: Text(post.title),
                  )),
                  const SizedBox(height: 24),
                  // 触发事件的按钮组
                  Row(
                    children: [
                      ElevatedButton(
                        onPressed: () => context.read<AppBloc>().add(LoadUser(1)),
                        child: const Text('加载用户'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () => context.read<AppBloc>().add(FetchPosts()),
                        child: const Text('加载帖子'),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

二、解决切换事件丢失前序数据的核心要点 #

1. 状态类设计要包含全量数据：不要为每个事件单独设计独立状态，而是将所有需要保留的数据字段整合到一个状态类中，确保状态能承载页面所有业务数据。
2. 使用copyWith方法更新状态：每次发射新状态时，基于当前状态的副本修改指定字段，未修改的字段自动沿用原有值，避免数据丢失。
3. Bloc事件处理基于当前状态：所有事件的状态更新都依赖当前状态的副本，而非创建全新的空状态，确保前序数据被保留。

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