Flutter中Checkbox无法互斥切换问题求助

问题分析 #

你的代码存在两个核心问题导致互斥切换功能失效：

• 状态变量mIsChecked、fIsChecked定义在build方法内部，每次组件重建都会被重置为false，无法持久化状态。
• 两个Checkbox各自使用独立的StatefulBuilder，它们的setState仅能更新自身局部状态，无法同步触发另一个Checkbox的状态更新。

修正后的代码 #

class _HomeScreenState extends State<HomeScreen> {
  // 将状态变量提升为State类的成员变量，保证状态持久化
  bool mIsChecked = false;
  bool fIsChecked = false;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'BMI Calculator',
          style: TextStyle(fontSize: 15),
        ),
        centerTitle: true,
        elevation: 0,
      ),
      body: Column(
        children: [
          TextContainer(
            size: size,
            text: 'I am a ',
          ),
          const SizedBox(height: 50),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                children: [
                  const CircleImage(gender: 'male'),
                  Transform.scale(
                    scale: 1.5,
                    child: Checkbox(
                      value: mIsChecked,
                      onChanged: (bool? value) {
                        setState(() {
                          mIsChecked = value!;
                          // 选中男性时自动取消女性勾选
                          if (mIsChecked) fIsChecked = false;
                        });
                      },
                      fillColor: MaterialStateProperty.resolveWith<Color>(
                          (Set<MaterialState> states) {
                        if (states.contains(MaterialState.disabled)) {
                          return const Color(0xFF00BB6E).withOpacity(.32);
                        }
                        return const Color(0xFF00BB6E);
                      }),
                      materialTapTargetSize: MaterialTapTargetSize.padded,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  const CircleImage(gender: 'female'),
                  Transform.scale(
                    scale: 1.5,
                    child: Checkbox(
                      value: fIsChecked,
                      onChanged: (bool? value) {
                        setState(() {
                          fIsChecked = value!;
                          // 选中女性时自动取消男性勾选
                          if (fIsChecked) mIsChecked = false;
                        });
                      },
                      fillColor: MaterialStateProperty.resolveWith<Color>(
                          (Set<MaterialState> states) {
                        if (states.contains(MaterialState.disabled)) {
                          return const Color(0xFF00BB6E).withOpacity(.32);
                        }
                        return const Color(0xFF00BB6E);
                      }),
                      materialTapTargetSize: MaterialTapTargetSize.padded,
                    ),
                  ),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}

额外优化建议 #

如果是严格的单选场景，用单个变量管理选中状态会更简洁，避免两个bool变量不同步的风险：

// 用String类型存储选中的性别，null表示未选中
String? selectedGender;

// 男性Checkbox配置
Checkbox(
  value: selectedGender == 'male',
  onChanged: (bool? value) {
    setState(() {
      selectedGender = value! ? 'male' : null;
    });
  },
  // 其他属性不变
)

// 女性Checkbox配置
Checkbox(
  value: selectedGender == 'female',
  onChanged: (bool? value) {
    setState(() {
      selectedGender = value! ? 'female' : null;
    });
  },
  // 其他属性不变
)

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