You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter 不使用第三方包实现Checkbox互斥单选的方法

实现方案

互斥选中无需引入第三方依赖,只要修改原有Checkbox的onChanged回调逻辑即可实现:选中任意一个选项时,同步将另一个选项的选中状态强制置为false。

修改后完整代码

Checkbox(
  value: prepaidCheckBoxValue,
  shape: const CircleBorder(),
  checkColor: Colors.white,
  onChanged: (value) {
    setState(() {
      prepaidCheckBoxValue = value ?? false;
      if (prepaidCheckBoxValue) {
        // 选中预付时,取消货到付款的选中状态
        podCheckBoxValue = false;
        selectedPaymentType = 'Prepaid';
      } else {
        // 若需要支持取消所有选中,可保留这行代码,不需要则删除即可
        selectedPaymentType = '';
      }
    });
  },
),
const Text(
  'Prepaid',
  style: TextStyle(
    fontSize: 20.0,
  ),
),
Checkbox(
  value: podCheckBoxValue,
  shape: const CircleBorder(),
  checkColor: Colors.white,
  onChanged: (value) {
    setState(() {
      podCheckBoxValue = value ?? false;
      if (podCheckBoxValue) {
        // 选中小货到付款时,取消预付的选中状态
        prepaidCheckBoxValue = false;
        selectedPaymentType = 'Pay on delivery';
      } else {
        // 若需要支持取消所有选中,可保留这行代码,不需要则删除即可
        selectedPaymentType = '';
      }
    });
  },
),
const Text(
  'Pay on Delivery',
  style: TextStyle(
    fontSize: 20.0,
  ),
),

可选优化(减少冗余状态)

你也可以不用单独维护prepaidCheckBoxValue、podCheckBoxValue两个布尔变量,直接用selectedPaymentType判断选中状态,代码更简洁:

Checkbox(
  value: selectedPaymentType == 'Prepaid',
  shape: const CircleBorder(),
  checkColor: Colors.white,
  onChanged: (value) {
    setState(() {
      if (value == true) {
        selectedPaymentType = 'Prepaid';
      } else {
        // 不需要支持取消所有选中时删除这行即可
        selectedPaymentType = '';
      }
    });
  },
),
const Text(
  'Prepaid',
  style: TextStyle(fontSize: 20.0),
),
Checkbox(
  value: selectedPaymentType == 'Pay on delivery',
  shape: const CircleBorder(),
  checkColor: Colors.white,
  onChanged: (value) {
    setState(() {
      if (value == true) {
        selectedPaymentType = 'Pay on delivery';
      } else {
        // 不需要支持取消所有选中时删除这行即可
        selectedPaymentType = '';
      }
    });
  },
),
const Text(
  'Pay on Delivery',
  style: TextStyle(fontSize: 20.0),
),

内容的提问来源于stack exchange,提问作者Dren

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 05:06:03