Flutter中如何修改showModalBottomSheet内CheckboxListTile的选中状态？

问题原因 #

你当前的代码中，showModalBottomSheet的内容直接在父组件的builder中构建，当调用父组件的setState时，只会重新渲染父组件的UI，而已经弹出的bottom sheet属于独立的路由层级，不会被父组件的状态更新触发重建，因此Checkbox的选中状态变化无法在界面上体现。

解决方案 #

方案一：使用StatefulBuilder（轻量快速）

通过StatefulBuilder为bottom sheet内部提供独立的状态更新能力，无需额外创建组件：

class showModalBottomSheetTester extends StatefulWidget {
  const showModalBottomSheetTester({super.key});

  @override
  State<showModalBottomSheetTester> createState() =>
      _showModalBottomSheetTesterState();
}

class _showModalBottomSheetTesterState
    extends State<showModalBottomSheetTester> {
  bool? _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('showModalBottomSheetTester'),
      ),
      body: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  // 用StatefulBuilder获取内部的状态更新方法
                  return StatefulBuilder(
                    builder: (context, innerSetState) {
                      return SizedBox(
                        height: 500,
                        child: Column(
                          children: [
                            const Padding(
                              padding: EdgeInsets.only(top: 30.0),
                              child: Text('Head'),
                            ),
                            CheckboxListTile(
                                title: const Text('data'),
                                value: _isChecked,
                                activeColor: Colors.red,
                                checkColor: Colors.blue,
                                tileColor: Colors.green,
                                subtitle: const Text('data'),
                                controlAffinity: ListTileControlAffinity.leading,
                                tristate: true,
                                onChanged: (bool? newValue) {
                                  // 调用内部的状态更新方法刷新bottom sheet
                                  innerSetState(() {
                                    _isChecked = newValue;
                                  });
                                })
                          ],
                        ),
                      );
                    },
                  );
                });
          },
          child: const Text('press')),
    );
  }
}

方案二：封装独立StatefulWidget（适合复杂场景）

如果bottom sheet包含多个交互控件，将其封装为独立的StatefulWidget，状态管理更清晰：

首先创建BottomSheetContent组件：

class BottomSheetContent extends StatefulWidget {
  final bool? initialChecked;
  const BottomSheetContent({super.key, this.initialChecked});

  @override
  State<BottomSheetContent> createState() => _BottomSheetContentState();
}

class _BottomSheetContentState extends State<BottomSheetContent> {
  late bool? _isChecked;

  @override
  void initState() {
    super.initState();
    _isChecked = widget.initialChecked;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.only(top: 30.0),
            child: Text('Head'),
          ),
          CheckboxListTile(
              title: const Text('data'),
              value: _isChecked,
              activeColor: Colors.red,
              checkColor: Colors.blue,
              tileColor: Colors.green,
              subtitle: const Text('data'),
              controlAffinity: ListTileControlAffinity.leading,
              tristate: true,
              onChanged: (bool? newValue) {
                setState(() {
                  _isChecked = newValue;
                });
              })
        ],
      ),
    );
  }
}

然后在父组件中调用：

onPressed: () {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return BottomSheetContent(initialChecked: _isChecked);
      });
},

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