Flutter基于Bloc实现复选框全选时单个选项触发全选异常

当前异常来自三个核心错误：

• 所有复选框共用同一个全局布尔值value控制选中状态，没有为每个子选项存储独立的选中标记
• 单个选项的点击逻辑toggleIndividualNotificationSelection直接翻转全局value，完全没有定位到当前点击的具体选项，for循环第一次迭代就直接return发射全局状态，逻辑完全失效
• UI层复选框渲染逻辑写反，还额外叠了不必要的Icon组件，导致状态和显示不匹配

1. 调整基础数据模型，给选项增加独立选中属性 #

首先给NotificationSetting类加选中状态字段，让每个选项可以存储自己的选中状态：

class NotificationSetting {
  final String title;
  bool isSelected;
  NotificationSetting({required this.title, this.isSelected = false});
}

2. 重写状态类，存储全量选项的选中状态 #

删掉原来没用的全局value字段，直接在状态里维护选项列表和全选状态，增加copyWith方法简化状态更新：

class NotificationState {
  final bool allowNotification; // 顶部全选框状态
  final List<NotificationSetting> notifications; // 子选项列表，每个带独立选中状态
  NotificationState({
    required this.allowNotification,
    required this.notifications,
  });

  NotificationState copyWith({
    bool? allowNotification,
    List<NotificationSetting>? notifications,
  }) {
    return NotificationState(
      allowNotification: allowNotification ?? this.allowNotification,
      notifications: notifications ?? this.notifications,
    );
  }
}

3. 修正Cubit业务逻辑 #

把原来错误的全局翻转逻辑改掉，分别处理全选和单个选项的点击事件：

class NotificationSelectionCubit extends Cubit<NotificationState> {
  NotificationSelectionCubit()
      : super(NotificationState(
          allowNotification: false,
          // 初始化子选项列表
          notifications: [
            NotificationSetting(title: 'Show Message'),
            NotificationSetting(title: 'Show Group'),
            NotificationSetting(title: 'Show Calling'),
          ],
        ));

  // 全选/取消全选逻辑
  void toggleAllowNotificationSelection() {
    final newAllSelectState = !state.allowNotification;
    // 所有子选项的选中状态和全选状态同步
    final updatedNotifications = state.notifications
        .map((e) => e..isSelected = newAllSelectState)
        .toList();
    emit(state.copyWith(
      allowNotification: newAllSelectState,
      notifications: updatedNotifications,
    ));
  }

  // 单个选项切换逻辑，传入当前点击的选项索引
  void toggleIndividualNotificationSelection(int index) {
    final updatedNotifications = [...state.notifications];
    // 只翻转当前点击项的状态
    updatedNotifications[index].isSelected = !updatedNotifications[index].isSelected;
    // 自动计算全选状态：所有子项都选中时全选自动勾上
    final isAllSelected = updatedNotifications.every((e) => e.isSelected);
    emit(state.copyWith(
      allowNotification: isAllSelected,
      notifications: updatedNotifications,
    ));
  }
}

4. 修正UI层渲染逻辑 #

删掉原来写反的Stack叠层，直接用圆形边框的Checkbox实现你要的单选按钮样式，渲染每个选项时读取自己的独立状态，点击时传入对应索引：

class NewHomeScreen extends StatefulWidget {
  const NewHomeScreen({Key? key}) : super(key: key);

  @override
  State<NewHomeScreen> createState() => _NewHomeScreenState();
}

class _NewHomeScreenState extends State<NewHomeScreen> {
  final allowNotifications = NotificationSetting(title: 'Allow Notifications');

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Test'),
        ),
        body: BlocBuilder<NotificationSelectionCubit, NotificationState>(
          builder: (context, state) {
            return ListView(
              children: [
                // 顶部全选框
                ListTile(
                  onTap: () => context.read<NotificationSelectionCubit>().toggleAllowNotificationSelection(),
                  leading: Checkbox(
                    shape: const CircleBorder(),
                    value: state.allowNotification,
                    onChanged: (_) => context.read<NotificationSelectionCubit>().toggleAllowNotificationSelection(),
                  ),
                  title: Text(
                    allowNotifications.title,
                    style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                ),
                const Divider(),
                // 子选项列表
                ...List.generate(state.notifications.length, (index) {
                  final notification = state.notifications[index];
                  return ListTile(
                    onTap: () => context.read<NotificationSelectionCubit>().toggleIndividualNotificationSelection(index),
                    leading: Checkbox(
                      shape: const CircleBorder(),
                      value: notification.isSelected,
                      onChanged: (_) => context.read<NotificationSelectionCubit>().toggleIndividualNotificationSelection(index),
                    ),
                    title: Text(
                      notification.title,
                      style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                  );
                }),
              ],
            );
          },
        ),
      );
}

改完后逻辑完全符合预期：

• 点击顶部全选框：所有子选项同步选中/取消选中
• 点击单个子选项：仅切换当前项的选中状态，不会影响其他选项
• 手动选中所有子选项时，顶部全选框自动变为选中状态；只要有一个子项取消选中，全选框自动取消
• 不需要额外叠组件，Checkbox自带的shape: CircleBorder()就能直接实现你要的圆形单选样式

内容的提问来源于stack exchange，提问作者who-aditya-nawandar