Flutter Cubit状态切换时保留已构建UI的方法及用法咨询

你现在遇到的问题其实是状态设计思路的小偏差——你把分类列表和分类菜品拆成了两个互斥的状态，导致每次切换到菜品状态时，BlocBuilder只会识别当前的ShowCategoriesItems，之前的分类UI自然就消失了。结合你的需求（分类只加载一次，切换分类时仅更新菜品），我们可以通过重构状态设计来完美解决这个问题。

核心思路：让状态包含所有需要展示的数据 #

与其用两个独立的状态分别承载分类和菜品，不如设计一个能同时容纳这两类数据的状态。这样不管是加载分类还是切换菜品，状态里始终保留之前的分类数据，UI就能持续展示分类列表。

具体实现步骤 #

1. 重构状态类

先创建一个基础状态，再设计一个包含完整数据的加载完成状态：

// 基础状态类
abstract class MenuState {}

// 加载中的状态（可选，用来处理加载时的loading效果）
class MenuLoading extends MenuState {}

// 加载完成的状态，同时保存分类列表和当前选中分类的菜品
class LoadedMenuState extends MenuState {
  final List<Category> categories;
  final List<MenuItem>? currentCategoryItems;

  LoadedMenuState({
    required this.categories,
    this.currentCategoryItems,
  });
}

2. 调整Cubit的业务逻辑

初始化时只加载一次分类，切换分类时基于当前状态保留分类数据，仅更新菜品：

class MenuCubit extends Cubit<MenuState> {
  final MenuRepository _repository;

  MenuCubit(this._repository) : super(MenuLoading());

  // 初始化加载分类（仅调用一次）
  Future<void> initMenu() async {
    try {
      final rootCategories = await _repository.postGetRootCategories();
      emit(LoadedMenuState(categories: rootCategories));
    } catch (e) {
      // 这里可以添加错误处理，比如emit MenuError状态
      rethrow;
    }
  }

  // 加载选中分类的菜品
  Future<void> loadCategoryItems(String categoryId) async {
    final currentState = state;
    // 确保当前状态是已加载分类的状态
    if (currentState is LoadedMenuState) {
      try {
        final categoryItems = await _repository.postGetCategoryItems(categoryId);
        // 保留原有的分类数据，仅更新菜品列表
        emit(LoadedMenuState(
          categories: currentState.categories,
          currentCategoryItems: categoryItems,
        ));
      } catch (e) {
        // 错误处理
        rethrow;
      }
    }
  }
}

3. 更新UI的BlocBuilder逻辑

现在只需要匹配LoadedMenuState，分类列表始终展示，菜品列表根据状态中的数据决定是否显示：

return BlocBuilder<MenuCubit, MenuState>(
  builder: (context, state) {
    if (state is MenuLoading) {
      return const Center(child: CircularProgressIndicator());
    } else if (state is LoadedMenuState) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          // 分类列表始终展示，不需要判断状态类型
          buildCategories(context, state.categories),
          // 如果有当前分类的菜品，就展示垂直列表，否则显示占位
          if (state.currentCategoryItems != null)
            Expanded(child: buildMenuItems(context, state.currentCategoryItems!))
          else
            SizedBox.shrink(),
        ],
      );
    }
    // 处理其他状态（比如错误状态）
    return const SizedBox.shrink();
  },
);

为什么这样更合理？ #

• 符合你的需求：分类数据仅在初始化时加载一次，后续切换分类不会重复请求，性能更好。
• 状态数据更完整：所有需要展示的UI数据都在同一个状态里，避免了状态切换导致的UI丢失问题。
• 逻辑更清晰：Cubit只需要关注数据的更新，UI根据状态中的字段来决定展示内容，耦合度更低。

内容的提问来源于stack exchange，提问作者Lloyd Hendricks