Flutter中AlertDialog嵌入CheckboxListTile勾选无响应问题求助

• AlertDialog本身独立于当前页面的状态树，调用页面的setState只会触发页面组件重绘，无法更新Dialog内部的UI，需要使用StatefulBuilder来管理Dialog内部的状态更新。
• 现有代码的onChanged回调存在逻辑错误：取消勾选（value为false）分支执行的仍然是添加元素操作，而非移除，导致选中状态逻辑异常。

1. 在showDialog的builder方法中，用StatefulBuilder包裹AlertDialog，获取Dialog专属的状态更新方法。
2. 修正onChanged回调的分支逻辑，取消勾选时执行移除元素操作。
3. 若需要关闭Dialog后页面上的选中组名同步更新，在修改选中列表后额外调用页面的setState更新显示值。

import 'package:flutter/material.dart';

void main() {
  runApp(PadelApp());
}

class PadelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _formkey = GlobalKey<FormState>();
  var _lstgrupos = ['Group 1', 'Group 2'];
  List<String> _SelectedGroupsItems = [];
  String _SelectedGroups = 'Groups';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Test')),
      body: Form(
        key: _formkey,
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    child: ListTile(
                      title: Text(_SelectedGroups),
                      onTap: () => showDialog(
                        context: context,
                        barrierDismissible: true,
                        builder: (context) {
                          // 新增StatefulBuilder管理Dialog内部状态
                          return StatefulBuilder(
                            builder: (context, setStateDialog) {
                              return AlertDialog(
                                title: const Text("Choose a group"),
                                content: SingleChildScrollView(
                                  child: Container(
                                    width: double.infinity,
                                    child: Column(
                                      mainAxisSize: MainAxisSize.min,
                                      children: _lstgrupos.map((lst) => CheckboxListTile(
                                        title: Text(lst),
                                        value: _SelectedGroupsItems.contains(lst),
                                        onChanged: (value) {
                                          // 用StatefulBuilder的方法更新Dialog UI
                                          setStateDialog(() {
                                            if (value!) {
                                              if (!_SelectedGroupsItems.contains(lst)) {
                                                _SelectedGroupsItems.add(lst);
                                              }
                                            } else {
                                              if (_SelectedGroupsItems.contains(lst)) {
                                                // 修正逻辑：取消勾选时移除元素
                                                _SelectedGroupsItems.remove(lst);
                                              }
                                            }
                                          });
                                          // 同步更新页面上的选中组名显示
                                          setState(() {
                                            _SelectedGroups = _SelectedGroupsItems.isEmpty
                                                ? 'Groups'
                                                : _SelectedGroupsItems.join(',');
                                          });
                                        },
                                      )).toList(),
                                    ),
                                  ),
                                ),
                                actions: <Widget>[
                                  TextButton(
                                    child: const Text('Cerrar'),
                                    onPressed: () => Navigator.of(context).pop(),
                                  )
                                ],
                              );
                            },
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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