Flutter中showModalBottomSheet内Radio按钮setState不生效问题求助

问题原因 #

showModalBottomSheet的builder函数只会在弹窗首次打开时执行一次，生成的弹窗UI是独立于父组件的快照。当你在父组件调用setState更新_selectedOption时，弹窗的Widget树不会重新构建，所以Radio的选中状态无法实时刷新，只有关闭弹窗重新打开时，才会重新执行builder获取最新的_selectedOption值。

解决方案1：使用StatefulBuilder快速修复 #

StatefulBuilder能让弹窗内部拥有局部刷新能力，结合父组件的状态更新，就能实现Radio选中状态的实时同步。

修改后的核心代码如下：

showModalBottomSheet<void>(
  context: context,
  builder: (BuildContext context) {
    // 用StatefulBuilder包裹弹窗内容
    return StatefulBuilder(
      builder: (context, setStateSheet) {
        return SizedBox(
          height: 200,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  title: const Text("Administrative Associate"),
                  trailing: Radio(
                    value: 2,
                    groupValue: _selectedOption,
                    onChanged: (value) {
                      // 先更新父组件的选中值
                      setState(() {
                        _selectedOption = value!;
                      });
                      // 调用StatefulBuilder的setState刷新弹窗UI
                      setStateSheet(() {});
                    },
                  ),
                ),
                ListTile(
                  title: const Text("Account Manager"),
                  trailing: Radio(
                    value: 3,
                    groupValue: _selectedOption,
                    onChanged: (value) {
                      setState(() {
                        _selectedOption = value!;
                      });
                      setStateSheet(() {});
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  },
);

解决方案2：封装独立的StatefulWidget（更适合复杂弹窗） #

如果弹窗内容复杂，将其封装成独立的StatefulWidget，自己管理局部状态并通过回调同步父组件数据，代码结构会更清晰。

第一步，创建弹窗组件：

class RadioBottomSheet extends StatefulWidget {
  final int selectedOption;
  final Function(int) onOptionChanged;

  const RadioBottomSheet({
    super.key,
    required this.selectedOption,
    required this.onOptionChanged,
  });

  @override
  State<RadioBottomSheet> createState() => _RadioBottomSheetState();
}

class _RadioBottomSheetState extends State<RadioBottomSheet> {
  late int _localSelected;

  @override
  void initState() {
    super.initState();
    _localSelected = widget.selectedOption;
  }

  @override
  void didUpdateWidget(covariant RadioBottomSheet oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 同步父组件传来的最新选中值
    if (oldWidget.selectedOption != widget.selectedOption) {
      _localSelected = widget.selectedOption;
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: const Text("Administrative Associate"),
              trailing: Radio(
                value: 2,
                groupValue: _localSelected,
                onChanged: (value) {
                  setState(() {
                    _localSelected = value!;
                  });
                  // 把选中值同步给父组件
                  widget.onOptionChanged(_localSelected);
                },
              ),
            ),
            ListTile(
              title: const Text("Account Manager"),
              trailing: Radio(
                value: 3,
                groupValue: _localSelected,
                onChanged: (value) {
                  setState(() {
                    _localSelected = value!;
                  });
                  widget.onOptionChanged(_localSelected);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

第二步，调用这个弹窗组件：

showModalBottomSheet<void>(
  context: context,
  builder: (BuildContext context) {
    return RadioBottomSheet(
      selectedOption: _selectedOption,
      onOptionChanged: (value) {
        setState(() {
          _selectedOption = value;
        });
      },
    );
  },
);

两种方法都能实现Radio按钮在弹窗内实时更新选中状态，可根据弹窗复杂度选择使用。

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