如何基于Bloc实现Flutter OutlinedButton的选中状态？

你的需求是实现类似单选按钮组的选中效果，当前代码已有状态判断的雏形，但缺少触发状态变更的核心逻辑和完整的选中样式反馈，以下是具体修改步骤：

1. 补充按钮点击的状态更新逻辑 #

当前onPressed方法为空，需要在点击时向Bloc发送事件，更新全局选中状态：

onPressed: () {
  // 发送事件通知Bloc更新选中的状态值
  selectBloc.add(SelectStatusChanged(selectStatus));
},

注：你需要确保SelectBloc中已定义对应的事件（比如SelectStatusChanged），并在mapEventToState方法中处理该事件，更新state.statusSelected的值。

2. 修复文本内容的语法错误 #

代码里Text(dynamic)是语法错误，建议给Buttons组件新增文本参数，或者根据selectStatus生成对应文本：

// 先给Buttons组件新增text参数
const Buttons({
  Key key,
  @required this.selectBloc,
  @required this.selectStatus,
  @required this.text, // 新增文本参数
}) : super(key: key);
final String text;

// 再修改Text组件，让文本颜色随选中状态变化
child: Text(
  text,
  style: TextStyle(
    color: state.statusSelected == selectStatus 
        ? Colors.blue // 选中时文本变蓝色
        : Colors.grey[500],
  ),
),

使用组件时传入对应文本：

Buttons(
  selectBloc: selectBloc,
  selectStatus: 0,
  text: "选项1",
),
Buttons(
  selectBloc: selectBloc,
  selectStatus: 1,
  text: "选项2",
),

3. 完善选中状态的样式（可选） #

除了边框颜色，还可以给选中按钮添加背景色、字体加粗等样式，强化选中反馈：

style: ButtonStyle(
  side: MaterialStateProperty.all(BorderSide(
    color: state.statusSelected == selectStatus 
        ? Colors.blue 
        : Colors.grey,
  )),
  backgroundColor: MaterialStateProperty.all(
    state.statusSelected == selectStatus 
        ? Colors.blue.withOpacity(0.1) // 选中时添加浅蓝背景
        : Colors.transparent,
  ),
  foregroundColor: MaterialStateProperty.all(
    state.statusSelected == selectStatus 
        ? Colors.blue 
        : Colors.grey[500],
  ),
),

4. 确保Bloc状态正确更新 #

你的SelectState需要包含statusSelected字段，且Bloc能正确处理事件生成新状态：

// 示例SelectState定义
class SelectState extends Equatable {
  final int statusSelected;

  const SelectState({this.statusSelected = 0});

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

// 示例SelectBloc事件处理逻辑
class SelectBloc extends Bloc<SelectEvent, SelectState> {
  SelectBloc() : super(const SelectState());

  @override
  Stream<SelectState> mapEventToState(SelectEvent event) async* {
    if (event is SelectStatusChanged) {
      yield SelectState(statusSelected: event.status);
    }
  }
}

// 对应的事件类
abstract class SelectEvent extends Equatable {
  const SelectEvent();

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

class SelectStatusChanged extends SelectEvent {
  final int status;

  const SelectStatusChanged(this.status);

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

完成以上修改后，点击按钮会触发Bloc状态更新，BlocBuilder会重新构建按钮，根据当前选中状态渲染对应样式，即可实现你需要的选中效果。

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