Flutter实现一行内两个RoundCheckBoxCus单选功能的方法

要让两个RoundCheckBoxCus实现同一时间仅选中一个的单选效果，核心是用统一状态变量管理选中状态，确保两个复选框的选中状态互斥。以下是具体实现方案：

首先在你的State类中添加状态变量：

int? selectedOption; // null代表未选中任何项，1对应第一个复选框，2对应第二个

替换原Row区域代码为：

Container(
  margin: EdgeInsets.only(
      top: ScreenUtil().setHeight(352),
      left: MediaQuery.of(context).size.width * 0.72),
  child: Row(
    children: <Widget>[
      SizedBox(width: 13.w),
      RoundCheckBoxCus(
        isChecked: selectedOption == 1,
        onTap: (selected) {
          setState(() {
            selectedOption = selected ? 1 : null;
          });
        },
        uncheckedColor: Colors.transparent,
        uncheckedWidget: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.transparent),
              borderRadius: BorderRadius.all(Radius.circular(20.sp))
          ),
          child: Icon(Icons.check, size:15.sp),
        ),
        size: 19.w,
      ),
      SizedBox(width: 30.w),
      RoundCheckBoxCus(
        isChecked: selectedOption == 2,
        onTap: (selected) {
          setState(() {
            selectedOption = selected ? 2 : null;
          });
        },
        uncheckedColor: Colors.transparent,
        uncheckedWidget: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.transparent),
              borderRadius: BorderRadius.all(Radius.circular(20.sp))
          ),
          child: Icon(Icons.check, size:15.sp),
        ),
        size: 19.w,
      ),
      SizedBox(width: 13.w),
    ],
  ),
),

核心逻辑说明： #

• 用selectedOption统一控制两个复选框的选中状态，避免各自独立状态导致的同时选中问题
• 每个复选框通过对比selectedOption的值判断自身是否选中，实现互斥效果
• 点击复选框时更新selectedOption，并通过setState触发UI刷新

内容的提问来源于stack exchange，提问作者bidyut das