Flutter可复用Radio组件问题：两个单选按钮可同时选中

你当前的问题在于每个RadioButton组件都维护着自己独立的_genderEnum状态，两个RadioButton实例的状态完全隔离，所以它们无法互相感知对方的选中状态，导致可以同时被选中。

要实现单选互斥，需要让一组Radio共享同一个选中状态。正确的做法是把选中状态提升到父组件中，子组件仅负责展示单个选项并触发状态更新的回调。

修正后的代码 #

1. 重构RadioButton为无状态组件 #

class RadioButton extends StatelessWidget {
  const RadioButton({
    super.key,
    required this.gender,
    required this.selectedGender,
    required this.onChanged,
  });

  final GenderEnum gender;
  final GenderEnum? selectedGender;
  final ValueChanged<GenderEnum?> onChanged;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Radio<GenderEnum>(
          value: gender,
          groupValue: selectedGender,
          onChanged: onChanged,
        ),
        Text(gender.name),
      ],
    );
  }
}

2. 在父组件中维护选中状态 #

// 父组件的State类中添加状态变量
GenderEnum? _selectedGender;

// 构建方法中使用RadioButton的部分修改为：
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    RadioButton(
      gender: GenderEnum.Male,
      selectedGender: _selectedGender,
      onChanged: (value) {
        setState(() {
          _selectedGender = value;
        });
      },
    ),
    RadioButton(
      gender: GenderEnum.Female,
      selectedGender: _selectedGender,
      onChanged: (value) {
        setState(() {
          _selectedGender = value;
        });
      },
    ),
  ],
),

• 把状态提升到共同的父组件是Flutter中实现组件间状态共享的常用模式，确保同一组的Radio组件使用同一个groupValue，这样Flutter框架就能自动处理单选互斥逻辑。
• 如果你需要更复杂的状态管理（比如跨多个页面共享），可以考虑使用Provider、Riverpod或Bloc等状态管理库，但当前场景下父组件维护状态已经足够。

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