Flutter中Dialog内RadioListTile点击后状态不更新问题

这个问题的核心是：Dialog的builder仅在弹窗初始化时执行一次，外部Stateful Widget的setState不会触发Dialog内容的重新构建。虽然你更新了_item变量，但Dialog内的Radio组件依然使用初始化时的groupValue值，所以选中状态不变化。

下面是两种可行的解决方法：

方法一：用StatefulBuilder包裹Dialog内容 #

通过StatefulBuilder为Dialog内部提供局部状态刷新能力，确保Radio的groupValue能同步更新：

void _showRadioDialog() {
  showDialog(
    context: context,
    builder: (context) {
      // 用StatefulBuilder包裹弹窗内容
      return StatefulBuilder(
        builder: (dialogContext, setStateDialog) {
          return AlertDialog(
            title: const Text('选择选项'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: itemList.map((item) {
                return RadioListTile(
                  title: Text(item),
                  value: item,
                  groupValue: _item,
                  onChanged: (value) {
                    // 先更新外部状态
                    setState(() {
                      _item = value!;
                    });
                    // 刷新Dialog内部UI
                    setStateDialog(() {});
                  },
                );
              }).toList(),
            ),
          );
        },
      );
    },
  );
}

方法二：封装独立的Stateful Dialog Widget #

将Dialog封装成独立组件，内部管理选中状态，通过回调同步到外部：

1. 定义Dialog组件 #

class RadioSelectDialog extends StatefulWidget {
  final List<String> options;
  final String initialSelected;
  final Function(String) onConfirm;

  const RadioSelectDialog({
    required this.options,
    required this.initialSelected,
    required this.onConfirm,
    Key? key,
  }) : super(key: key);

  @override
  State<RadioSelectDialog> createState() => _RadioSelectDialogState();
}

class _RadioSelectDialogState extends State<RadioSelectDialog> {
  late String _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = widget.initialSelected;
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('选择选项'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: widget.options.map((option) {
          return RadioListTile(
            title: Text(option),
            value: option,
            groupValue: _selectedOption,
            onChanged: (value) {
              setState(() {
                _selectedOption = value!;
              });
            },
          );
        }).toList(),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('取消'),
        ),
        TextButton(
          onPressed: () {
            widget.onConfirm(_selectedOption);
            Navigator.pop(context);
          },
          child: const Text('确定'),
        ),
      ],
    );
  }
}

2. 调用Dialog #

void _showRadioDialog() {
  showDialog(
    context: context,
    builder: (context) {
      return RadioSelectDialog(
        options: itemList,
        initialSelected: _item,
        onConfirm: (selected) {
          setState(() {
            _item = selected;
          });
        },
      );
    },
  );
}

额外优化建议 #

如果不需要实时同步外部状态，更推荐在弹窗关闭时再同步_item值（如方法二的实现），这样可以减少不必要的UI刷新，提升性能。

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