Flutter中关闭BottomSheet后如何保留内部组件状态？

核心原因 #

ModalBottomSheet默认是临时弹窗，关闭后会被销毁，内部的局部状态会丢失。要保存状态，得把状态放到BottomSheet之外的持久化位置。

方法一：将状态提升至父组件（新手首选） #

把开关和ChoiceChip的状态变量放在打开BottomSheet的父组件中，BottomSheet只负责展示状态和触发状态更新。

父组件代码示例 #

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

  @override
  State<ParentScreen> createState() => _ParentScreenState();
}

class _ParentScreenState extends State<ParentScreen> {
  // 保存开关状态
  bool _isSwitched = false;
  // 保存选中的ChoiceChip值
  String? _selectedChip;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('保存BottomSheet状态')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return _BottomSheetContent(
                  isSwitched: _isSwitched,
                  selectedChip: _selectedChip,
                  // 传递开关状态更新方法
                  onSwitchChanged: (value) {
                    setState(() => _isSwitched = value);
                  },
                  // 传递Chip选中状态更新方法
                  onChipSelected: (chipValue) {
                    setState(() => _selectedChip = chipValue);
                  },
                );
              },
            );
          },
          child: const Text('打开BottomSheet'),
        ),
      ),
    );
  }
}

BottomSheet内容组件代码 #

class _BottomSheetContent extends StatelessWidget {
  final bool isSwitched;
  final String? selectedChip;
  final ValueChanged<bool> onSwitchChanged;
  final ValueChanged<String> onChipSelected;

  const _BottomSheetContent({
    required this.isSwitched,
    required this.selectedChip,
    required this.onSwitchChanged,
    required this.onChipSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Switch(
            value: isSwitched,
            onChanged: onSwitchChanged,
          ),
          Wrap(
            spacing: 8.0,
            children: [
              ChoiceChip(
                label: const Text('选项1'),
                selected: selectedChip == 'option1',
                onSelected: (selected) {
                  if (selected) onChipSelected('option1');
                },
              ),
              ChoiceChip(
                label: const Text('选项2'),
                selected: selectedChip == 'option2',
                onSelected: (selected) {
                  if (selected) onChipSelected('option2');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

方法二：使用状态管理库（复杂场景适用） #

如果后期多个页面或组件需要共享这些状态，用Provider/Riverpod这类状态管理库，把状态抽离到独立的类中，和UI解耦。

1. 创建状态管理类 #

import 'package:flutter/material.dart';

class SettingsProvider extends ChangeNotifier {
  bool _isSwitched = false;
  String? _selectedChip;

  bool get isSwitched => _isSwitched;
  String? get selectedChip => _selectedChip;

  // 更新开关状态
  void updateSwitch(bool value) {
    _isSwitched = value;
    notifyListeners();
  }

  // 更新选中的Chip
  void updateSelectedChip(String value) {
    _selectedChip = value;
    notifyListeners();
  }
}

2. 在APP根节点提供状态 #

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => SettingsProvider(),
      child: const MyApp(),
    ),
  );
}

3. 在BottomSheet中使用状态 #

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Consumer<SettingsProvider>(
      builder: (context, provider, child) {
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Switch(
                value: provider.isSwitched,
                onChanged: provider.updateSwitch,
              ),
              Wrap(
                spacing: 8.0,
                children: [
                  ChoiceChip(
                    label: const Text('选项1'),
                    selected: provider.selectedChip == 'option1',
                    onSelected: (selected) {
                      if (selected) provider.updateSelectedChip('option1');
                    },
                  ),
                  ChoiceChip(
                    label: const Text('选项2'),
                    selected: provider.selectedChip == 'option2',
                    onSelected: (selected) {
                      if (selected) provider.updateSelectedChip('option2');
                    },
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  },
);

方法三：本地持久化（重启APP仍保留状态） #

如果需要重启APP后还能恢复之前的选择，结合shared_preferences包把状态保存到本地存储。

1. 修改状态管理类 #

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SettingsProvider extends ChangeNotifier {
  final SharedPreferences _prefs;
  bool _isSwitched = false;
  String? _selectedChip;

  SettingsProvider(this._prefs) {
    // 初始化时读取本地保存的状态
    _loadSavedState();
  }

  Future<void> _loadSavedState() async {
    _isSwitched = _prefs.getBool('switch_state') ?? false;
    _selectedChip = _prefs.getString('selected_chip');
    notifyListeners();
  }

  bool get isSwitched => _isSwitched;
  String? get selectedChip => _selectedChip;

  void updateSwitch(bool value) {
    _isSwitched = value;
    _prefs.setBool('switch_state', value);
    notifyListeners();
  }

  void updateSelectedChip(String value) {
    _selectedChip = value;
    _prefs.setString('selected_chip', value);
    notifyListeners();
  }
}

2. 初始化SharedPreferences #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  runApp(
    ChangeNotifierProvider(
      create: (context) => SettingsProvider(prefs),
      child: const MyApp(),
    ),
  );
}

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