如何在Flutter中实现两个互斥选中的并列Checkbox功能

核心逻辑 #

• 在任意Checkbox的选中回调触发时，同步将另一个Checkbox的选中状态置为false即可实现互斥
• 所有组件需放在Row容器内保证横向并排展示

调整后代码 #

// 状态变量保持不变
bool isMan = false;
bool isWoman = false;

// 布局部分记得外层包裹Row实现横向并排
Row(
  children: [
    Padding(
      padding: EdgeInsets.only(right: 10),
      child: Text(
        "Man:",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
    Theme(
      data: ThemeData(unselectedWidgetColor: Colors.white),
      child: Checkbox(
        value: isMan,
        checkColor: Color(0xfff44336),
        activeColor: Colors.white,
        onChanged: (value) {
          setState(
            () {
              isMan = value!;
              // 选中男性时自动取消女性勾选
              if (isMan) {
                isWoman = false;
              }
            },
          );
        },
      ),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: Text(
        "Woman:",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
    Theme(
      data: ThemeData(unselectedWidgetColor: Colors.white),
      child: Checkbox(
        value: isWoman,
        checkColor: Color(0xfff44336),
        activeColor: Colors.white,
        onChanged: (value) {
          setState(
            () {
              isWoman = value!;
              // 选中女性时自动取消男性勾选
              if (isWoman) {
                isMan = false;
              }
            },
          );
        },
      ),
    ),
  ],
)

可选优化 #

如果不需要支持两者都不选的场景，这种二选一的交互更推荐使用Flutter官方提供的Radio组件，本身就自带互斥逻辑，开发成本更低。

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