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
相关产品推荐
相关产品推荐

