Flutter中如何在CheckboxGroup复选框勾选时显示对应按钮

问题核心原因 #

1. 你当前的布局将整个CheckboxGroup组件和按钮放在同一行，按钮只能固定在整个复选框列表的右侧底部，无法跟随具体选中的复选框行显示
2. 你用单一布尔类型的day变量存储选中状态，只能记录是否有复选框被选中，无法区分具体是哪一行被选中，也不支持多选场景

解决方案 #

你可以放弃封装好的CheckboxGroup组件，自行构建每一行的复选框条目，每一行单独控制对应按钮的显示隐藏，具体实现如下：

1. 首先调整状态存储，改为存储所有被选中的星期项（如果只需要单选可以存储单个选中值即可）

// 多选场景状态定义
List<String> selectedDays = [];
// 单选场景状态定义
// String? selectedDay;

2. 替换原有布局代码

Container(
  child: SizedBox(
    height: MediaQuery.of(context).size.height * 0.45,
    child: Column(
      children: [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday",
      ].map((day) {
        // 多选判断逻辑
        final isSelected = selectedDays.contains(day);
        // 单选判断逻辑
        // final isSelected = selectedDay == day;
        return Row(
          children: [
            Expanded(
              child: CheckboxListTile(
                value: isSelected,
                title: Text(day, style: GoogleFonts.montserrat(fontSize: 15)),
                onChanged: (checked) {
                  setState(() {
                    // 多选选中逻辑
                    if (checked == true) {
                      selectedDays.add(day);
                    } else {
                      selectedDays.remove(day);
                    }
                    // 单选选中逻辑
                    // selectedDay = checked == true ? day : null;
                  });
                },
              ),
            ),
            // 仅当前行选中时显示按钮
            if (isSelected)
              Padding(
                padding: const EdgeInsets.only(right: 10),
                child: customButton(context, "Pick Time", (){}, 
                  MediaQuery.of(context).size.width*0.3, 40.0),
              )
          ],
        );
      }).toList(),
    ),
  ),
)

修改后按钮会直接显示在当前选中的复选框行右侧，和你的预期效果一致，原有单独封装的picktimebutton函数可以不再使用。

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