Flutter中关闭showModalBottomSheet后保留筛选值的实现方案

不用SharedPreferences这类外部存储包的话，核心思路是把筛选状态托管在弹窗的父组件（或上层持久化的状态容器）中——因为每次打开showModalBottomSheet都会创建新的弹窗实例，内部状态会被自动重置。下面是几种实用的原生实现方式：

一、父组件直接维护筛选状态（最常用、易维护） #

这是最简单的方案，把筛选变量放在弹窗的父页面State里，打开弹窗时传递当前值，修改后同步回父组件：

1. 在父页面的State中定义筛选参数：

class _HomeScreenState extends State<HomeScreen> {
  // 示例筛选参数：选中分类、价格区间
  String _selectedCategory = "全部";
  double _minPrice = 0;
  double _maxPrice = 1000;
}

2. 打开弹窗时传递当前筛选值和更新回调：

// 打开筛选弹窗的按钮点击事件
void _openFilterSheet() {
  showModalBottomSheet(
    context: context,
    builder: (_) => FilterBottomSheet(
      currentCategory: _selectedCategory,
      currentMinPrice: _minPrice,
      currentMaxPrice: _maxPrice,
      onFilterUpdated: (newCat, newMin, newMax) {
        setState(() {
          _selectedCategory = newCat;
          _minPrice = newMin;
          _maxPrice = newMax;
        });
      },
    ),
  );
}

3. 弹窗组件使用传入的初始值渲染，修改时触发回调：

class FilterBottomSheet extends StatelessWidget {
  final String currentCategory;
  final double currentMinPrice;
  final double currentMaxPrice;
  final Function(String, double, double) onFilterUpdated;

  const FilterBottomSheet({
    super.key,
    required this.currentCategory,
    required this.currentMinPrice,
    required this.currentMaxPrice,
    required this.onFilterUpdated,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 分类下拉框，用currentCategory初始化选中值
          DropdownButton<String>(
            value: currentCategory,
            items: const [
              DropdownMenuItem(value: "全部", child: Text("全部")),
              DropdownMenuItem(value: "家电", child: Text("家电")),
              DropdownMenuItem(value: "服饰", child: Text("服饰")),
            ],
            onChanged: (newCat) {
              if (newCat != null) {
                onFilterUpdated(newCat, currentMinPrice, currentMaxPrice);
              }
            },
          ),
          // 价格滑块同理，用currentMin/MaxPrice初始化
          RangeSlider(
            min: 0,
            max: 1000,
            values: RangeValues(currentMinPrice, currentMaxPrice),
            onChanged: (values) {
              onFilterUpdated(currentCategory, values.start, values.end);
            },
          ),
        ],
      ),
    );
  }
}

这样每次打开弹窗，都会用父组件中保存的最新筛选值初始化，关闭后状态也会保留在父组件里（只要父组件不被销毁）。

二、用InheritedWidget实现跨组件状态共享 #

如果你的筛选状态需要被多个页面/组件访问，可以用Flutter原生的InheritedWidget来共享状态，避免层层传递参数：

1. 创建封装筛选状态的InheritedWidget：

class FilterProvider extends InheritedWidget {
  final String selectedCategory;
  final double minPrice;
  final double maxPrice;
  final Function(String, double, double) updateFilters;

  const FilterProvider({
    super.key,
    required this.selectedCategory,
    required this.minPrice,
    required this.maxPrice,
    required this.updateFilters,
    required super.child,
  });

  // 提供全局获取方法
  static FilterProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<FilterProvider>()!;
  }

  @override
  bool updateShouldNotify(FilterProvider old) {
    return selectedCategory != old.selectedCategory ||
        minPrice != old.minPrice ||
        maxPrice != old.maxPrice;
  }
}

2. 在根组件（或上层持久化组件）中包裹并维护状态：

class _AppRootState extends State<AppRoot> {
  String _selectedCategory = "全部";
  double _minPrice = 0;
  double _maxPrice = 1000;

  void _updateFilters(String cat, double min, double max) {
    setState(() {
      _selectedCategory = cat;
      _minPrice = min;
      _maxPrice = max;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FilterProvider(
      selectedCategory: _selectedCategory,
      minPrice: _minPrice,
      maxPrice: _maxPrice,
      updateFilters: _updateFilters,
      child: const MaterialApp(home: HomeScreen()),
    );
  }
}

3. 弹窗和其他组件直接获取状态：

class FilterBottomSheet extends StatelessWidget {
  const FilterBottomSheet({super.key});

  @override
  Widget build(BuildContext context) {
    final filterState = FilterProvider.of(context);
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          DropdownButton<String>(
            value: filterState.selectedCategory,
            items: const [
              DropdownMenuItem(value: "全部", child: Text("全部")),
              DropdownMenuItem(value: "家电", child: Text("家电")),
            ],
            onChanged: (newCat) {
              if (newCat != null) {
                filterState.updateFilters(newCat, filterState.minPrice, filterState.maxPrice);
              }
            },
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 不要把筛选状态放在弹窗内部的State里，因为showModalBottomSheet关闭后，弹窗组件会被dispose，状态会丢失。
• 如果需要在APP重启后也保留筛选值，才需要用到SharedPreferences或其他存储方案，否则上述原生状态管理足够。

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