Flutter中如何用BLoC模式实现无状态组件单选按钮组

1. 添加依赖 #

在pubspec.yaml中引入bloc和flutter_bloc包：

dependencies:
  flutter:
    sdk: flutter
  bloc: ^8.1.3
  flutter_bloc: ^8.1.4

版本号可根据Flutter生态更新情况替换为最新稳定版

2. 定义事件类 #

创建用于通知Bloc用户选择行为的事件：

class SelectOptionEvent extends Equatable {
  final String selectedValue;

  const SelectOptionEvent(this.selectedValue);

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

继承Equatable是为了让Bloc能正确判断事件是否重复，避免无效状态更新

3. 定义状态类 #

创建保存单选按钮选中状态的模型，用于向UI传递状态数据：

class OptionSelectedState extends Equatable {
  final String selectedValue;

  const OptionSelectedState(this.selectedValue);

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

4. 实现Bloc核心逻辑 #

编写处理事件、管理状态的Bloc类：

class OptionBloc extends Bloc<SelectOptionEvent, OptionSelectedState> {
  OptionBloc() : super(const OptionSelectedState('option1')) { // 设置初始选中值
    on<SelectOptionEvent>((event, emit) {
      // 收到选择事件后，发出新的选中状态
      emit(OptionSelectedState(event.selectedValue));
    });
  }
}

5. 构建无状态UI组件 #

通过BlocProvider提供Bloc实例，用BlocBuilder监听状态变化并渲染Radio组：

class RadioGroupWithBloc extends StatelessWidget {
  const RadioGroupWithBloc({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => OptionBloc(),
      child: Scaffold(
        appBar: AppBar(title: const Text('BLoC 单选按钮')),
        body: BlocBuilder<OptionBloc, OptionSelectedState>(
          builder: (context, state) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ListTile(
                  title: const Text('选项1'),
                  leading: Radio<String>(
                    value: 'option1',
                    groupValue: state.selectedValue,
                    onChanged: (value) {
                      if (value != null) {
                        context.read<OptionBloc>().add(SelectOptionEvent(value));
                      }
                    },
                  ),
                ),
                ListTile(
                  title: const Text('选项2'),
                  leading: Radio<String>(
                    value: 'option2',
                    groupValue: state.selectedValue,
                    onChanged: (value) {
                      if (value != null) {
                        context.read<OptionBloc>().add(SelectOptionEvent(value));
                      }
                    },
                  ),
                ),
                ListTile(
                  title: const Text('选项3'),
                  leading: Radio<String>(
                    value: 'option3',
                    groupValue: state.selectedValue,
                    onChanged: (value) {
                      if (value != null) {
                        context.read<OptionBloc>().add(SelectOptionEvent(value));
                      }
                    },
                  ),
                ),
                const SizedBox(height: 20),
                Text('当前选中: ${state.selectedValue}'),
              ],
            );
          },
        ),
      ),
    );
  }
}

关键说明 #

• 全程使用StatelessWidget，状态完全由Bloc接管，无需调用setState
• BlocBuilder会自动监听Bloc的状态变化，实时更新Radio的选中状态
• 通过context.read<OptionBloc>().add()触发事件，让Bloc处理状态更新逻辑

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