Flutter Web：如何避免浏览器窗口调整大小时UI状态丢失？

Flutter Web 触发浏览器窗口 resize 时，框架会主动触发全量 Widget 树重建以适配新的视图尺寸，这是框架的正常机制。你遇到的状态丢失本质不是 rebuild 本身导致的，而是你的下拉选中值没有被正确持有、在 rebuild 时被重置为了初始值。

• 调整状态持有位置
  把三个下拉框的选中值从下拉组件本身、或者会被重建的子组件 State 中抽离，放到页面根级的 StatefulWidget 的 State 中，或者接入 Provider、Riverpod 等状态管理库，将选中值存储在独立于 Widget 树的状态实例中，rebuild 时直接读取该全局/上层状态赋值给下拉组件的value属性即可。
• 检查组件 Key 配置
  如果你给下拉组件手动设置了UniqueKey、或者每次 build 时动态生成新的 Key，会导致 rebuild 时 Flutter 认为这是全新的组件，直接销毁原有 State 实例、重置所有状态。删除不必要的动态 Key、使用固定的ValueKey即可避免该问题。
• 用PageStorage持久化页面状态
  给当前页面根节点（比如Scaffold）设置固定的PageStorageKey，示例代码：

Scaffold(
  key: const PageStorageKey('query_page_storage'),
  // 其余原有配置
)

如果你的页面是在PageView、TabView等可切换容器中，还可以给对应State混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true，避免页面切换/resize时被框架销毁。

完全不需要阻止窗口 resize 事件，也不需要让用户接受重选的情况，只要按上述方案调整状态管理逻辑即可完美保留选中值。

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