Flutter BloC中多选框UI更新异常问题求助

核心问题原因 #

1. 状态重复导致UI不更新：你的OnChoiceSportState仅传递单个布尔值，当连续执行相同状态变化（比如连续取消两个选项，两次emit的val都是false），Bloc会通过Equatable的props判断新旧状态相等，从而跳过UI更新。
2. Cubit内部可变状态不规范：你将choiceSportsList作为Cubit的成员变量直接修改，而非通过不可变状态传递，违反了Bloc的状态不可变原则，容易导致状态不一致。
3. 单例Cubit重复初始化：你提前调用sl<FilterCubit>().fillChoiceSportsList(10)，又在BlocProvider中复用单例Cubit，会导致choiceSportsList被多次填充，长度超出预期，引发索引错误或状态混乱。

关键概念解答 #

在Bloc/Cubit中，所有需要触发UI更新的操作必须emit新的状态，这和Provider的notifyListeners()作用类似，但Bloc会通过Equatable自动对比新旧状态：只有当新状态的props与旧状态不同时，才会触发UI重建。如果emit重复状态，UI不会更新。

具体修复步骤 #

1. 重构状态类，包含完整筛选状态 #

将所有筛选相关数据整合到一个不可变状态中，确保每次状态变化都能被正确识别：

sealed class FilterState extends Equatable {
  const FilterState();

  @override
  List<Object?> get props => [];
}

final class FilterInitial extends FilterState {
  const FilterInitial();

  @override
  List<Object?> get props => [];
}

final class FilterUpdated extends FilterState {
  final int sortByIndex;
  final List<bool> selectedSports;

  const FilterUpdated({
    required this.sortByIndex,
    required this.selectedSports,
  });

  @override
  List<Object?> get props => [sortByIndex, selectedSports];
}

2. 重构Cubit，依赖状态管理数据 #

移除Cubit内部的可变成员变量，所有状态变更通过创建新的不可变状态实现：

class FilterCubit extends Cubit<FilterState> {
  FilterCubit() : super(const FilterInitial());

  // 初始化运动选项列表
  void initializeSports(int length) {
    emit(FilterUpdated(
      sortByIndex: 0,
      selectedSports: List.filled(length, false),
    ));
  }

  void onSortByClick(int index) {
    if (state is FilterUpdated) {
      final currentState = state as FilterUpdated;
      emit(FilterUpdated(
        sortByIndex: index,
        selectedSports: currentState.selectedSports,
      ));
    }
  }

  void onChoiceSportClick(int index) {
    if (state is FilterUpdated) {
      final currentState = state as FilterUpdated;
      // 创建新列表（必须复制原列表，不能直接修改）
      final newSelectedSports = List.from(currentState.selectedSports);
      newSelectedSports[index] = !newSelectedSports[index];
      emit(FilterUpdated(
        sortByIndex: currentState.sortByIndex,
        selectedSports: newSelectedSports,
      ));
    }
  }
}

3. 修复UI代码，正确监听状态 #

使用BlocBuilder监听状态变化，从状态中获取数据，而非直接访问Cubit成员变量；同时为每个BottomSheet创建独立的Cubit实例，避免状态共享：

showFilterBottomSheetComponent({double? heightFactor}) {
  return showModalBottomSheet<void>(
    context: sl<NavigationService>().navigatorKey.currentContext!,
    isScrollControlled: true,
    builder: (BuildContext context) {
      List<String> sports = [
        'Padel',
        'Soccer',
        'Basketball',
        'Tennis',
        'Padbol',
        'Pickleball',
        'Volleyball',
        'Badminton',
        'Squash',
        'Cricket'
      ];

      return FractionallySizedBox(
        heightFactor: heightFactor ?? 0.85,
        child: BlocProvider(
          // 创建新的Cubit实例并初始化
          create: (context) => FilterCubit()..initializeSports(sports.length),
          child: SafeArea(
            child: Padding(
              padding: EdgeInsets.all(AppPadding.p24).copyWith(top: AppPadding.p16),
              child: FilterChooseSportBody(data: sports),
            ),
          ),
        ),
      );
    },
  );
}

class FilterChooseSportBody extends StatelessWidget {
  const FilterChooseSportBody({
    super.key,
    required this.data,
  });

  final List<String> data;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<FilterCubit, FilterState>(
      builder: (context, state) {
        // 处理初始状态
        if (state is! FilterUpdated) return const SizedBox.shrink();
        
        final selectedSports = state.selectedSports;
        return Column(
          children: [
            for (int i = 0; i < data.length; i++)
              CheckBoxListTileComponent(
                title: data[i],
                value: selectedSports[i],
                onChanged: (value) {
                  context.read<FilterCubit>().onChoiceSportClick(i);
                },
                smallHeight: true,
                style: getBodyMedium(),
              ),
          ],
        );
      },
    );
  }
}

额外注意事项 #

• 避免使用单例Cubit管理临时弹窗的状态，每个弹窗应拥有独立的Cubit实例，防止状态污染。
• 始终通过创建新的不可变对象（如复制列表）来修改状态，直接修改原对象会导致Equatable无法识别状态变化。

内容的提问来源于stack exchange，提问作者Naser Ebedo