Flutter底部弹窗内CheckboxListTile无法选中/多选如何解决

复选框点击没反应的核心问题是showModalBottomSheet弹出的内容属于独立的组件上下文，你之前在CheckboxListTile的onChanged里调用的是外层主页面_MainScreenState的setState，这个方法只会刷新主页面的UI，不会触发弹窗内部的组件重建，所以哪怕selectedIndex数组的值已经改了，复选框的视觉状态也不会更新。
另外你的代码还有三个影响体验和性能的问题：

• 直接把getAllApps()接口调用写在FutureBuilder的future参数上，每次组件触发重建都会重复发起接口请求
• 点击Save按钮时没有把选中结果回传给外层，而且直接修改外层的selectedIndex变量，用户点Cancel取消选择时，之前的选中操作也会被保留，不符合交互预期
• 列表放在Column里没有做高度约束，长列表场景下会出现布局溢出报错

1. 弹窗内部用StatefulBuilder获取局部刷新专用的setState方法，选中/取消选中时调用这个方法，只刷新弹窗内部的UI
2. 触发弹窗时就提前调用接口拿到Future对象，传给FutureBuilder，避免重复请求
3. 弹窗内部维护一个临时的选中数组，用户操作时只改这个临时数组，点Cancel直接关闭不回传数据，点Save时再把临时数组回传给外层页面，保证取消操作可以回滚选择状态
4. 给列表外层加Expanded组件撑开剩余高度，解决布局溢出问题

首先修改底部弹窗方法：

// 泛型改为回传选中id列表的类型，这里假设id是int类型，可根据实际业务类型调整
Future<List<int>?> _showModalBottomSheet(BuildContext context) {
  // 触发弹窗时提前请求接口，避免FutureBuilder重复触发请求
  final appsFuture = getAllApps();
  return showModalBottomSheet<List<int>>(
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(20),
      ),
    ),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    context: context,
    isScrollControlled: true,
    builder: (context) {
      // 初始化临时选中数组，拷贝外层已选中的值，进入弹窗时默认选中之前选过的项
      List<int> tempSelected = List.from(selectedIndex);
      return FractionallySizedBox(
        heightFactor: 0.9,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(150.0, 20.0, 150.0, 20.0),
              child: Container(
                height: 8.0,
                width: 80.0,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
            ),
            Expanded(
              // 用StatefulBuilder提供局部刷新能力
              child: StatefulBuilder(
                builder: (context, setSheetState) {
                  return FutureBuilder<AllApps>(
                    future: appsFuture,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                          physics: const AlwaysScrollableScrollPhysics(),
                          itemCount: snapshot.data?.data.length,
                          itemBuilder: (context, index) {
                            final app = snapshot.data?.data[index];
                            return CheckboxListTile(
                              enableFeedback: true,
                              title: Text(app!.name),
                              value: tempSelected.contains(app.id),
                              onChanged: (_) {
                                // 调用弹窗局部的setState刷新复选框状态
                                setSheetState(() {
                                  if (tempSelected.contains(app.id)) {
                                    tempSelected.remove(app.id);
                                  } else {
                                    tempSelected.add(app.id);
                                  }
                                });
                              },
                            );
                          },
                        );
                      } else if (snapshot.hasError) {
                        return Center(child: Text("加载失败：${snapshot.error}"));
                      }
                      return const Center(child: CircularProgressIndicator());
                    },
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20.0, right: 5.0, bottom: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: ElevatedButton(
                      child: const Text('Cancel'),
                      onPressed: () {
                        // 直接关闭，不回传数据
                        Navigator.pop(context);
                      },
                    ),
                  ),
                  ElevatedButton(
                    child: const Text('Save'),
                    onPressed: () {
                      // 回传临时选中的列表
                      Navigator.pop(context, tempSelected);
                    },
                  ),
                ],
              ),
            )
          ],
        ),
      );
    });
}

然后修改按钮的点击回调，接收弹窗回传的选中结果：

onPressed: () {
  _showModalBottomSheet(context).then((selectedList) {
    // 只有点Save返回的列表不为空时，才更新外层状态
    if (selectedList != null) {
      setState(() {
        selectedIndex = selectedList;
        // 原有逻辑里的index变量如果需要赋值，在这里处理即可
      });
    }
  });
}

补充：如果你的app id是String类型，把代码里所有List<int>改成List<String>即可，和接口返回的字段类型保持一致。

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