Flutter ModalBottomSheet中单选按钮唤起键盘后状态重置问题

问题原因 #

键盘弹出时会触发ModalBottomSheet的重建，如果你的单选按钮选中状态没有被正确持久化：

• 状态变量定义在build方法内部，每次重建都会重新初始化回初始值（Self和Work）；
• 使用了StatelessWidget，无法持有可变状态，重建时状态完全重置。

解决方法 #

1. 用StatefulWidget持久化状态

将选中状态定义为State类的成员变量，在初始化阶段设置初始选中值，而非build方法内：

class CustomBottomSheet extends StatefulWidget {
  @override
  _CustomBottomSheetState createState() => _CustomBottomSheetState();
}

class _CustomBottomSheetState extends State<CustomBottomSheet> {
  // 初始预选中Self和Work
  final List<String> _selectedOptions = ['Self', 'Work'];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(decoration: const InputDecoration(labelText: '标题')),
          // Self单选框
          RadioListTile<String>(
            title: const Text('Self'),
            value: 'Self',
            groupValue: _selectedOptions.contains('Self') ? 'Self' : null,
            onChanged: (value) {
              setState(() {
                _selectedOptions.contains('Self')
                    ? _selectedOptions.remove('Self')
                    : _selectedOptions.add('Self');
              });
            },
          ),
          // Work单选框
          RadioListTile<String>(
            title: const Text('Work'),
            value: 'Work',
            groupValue: _selectedOptions.contains('Work') ? 'Work' : null,
            onChanged: (value) {
              setState(() {
                _selectedOptions.contains('Work')
                    ? _selectedOptions.remove('Work')
                    : _selectedOptions.add('Work');
              });
            },
          ),
          // Personal单选框
          RadioListTile<String>(
            title: const Text('Personal'),
            value: 'Personal',
            groupValue: _selectedOptions.contains('Personal') ? 'Personal' : null,
            onChanged: (value) {
              setState(() {
                _selectedOptions.contains('Personal')
                    ? _selectedOptions.remove('Personal')
                    : _selectedOptions.add('Personal');
              });
            },
          ),
        ],
      ),
    );
  }
}

这样状态由State类持有，ModalBottomSheet重建时会读取当前状态而非重新初始化。

2. 禁止在build内定义状态变量

永远不要把_selectedOptions这类需要保留的状态变量写在build方法里，否则每次组件重建都会重置状态。

3. 跨组件共享状态的处理

如果弹窗状态需要和父组件或其他组件共享，可使用Riverpod、Provider等状态管理工具，将状态提升到全局或父组件层级，确保重建时状态不丢失。

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