Flutter横竖屏切换时保持SingleChildScrollView滚动位置一致的方案

这个问题的本质是横竖屏切换触发页面组件重建时，滚动组件的状态没有被持久化存储导致的，以下三个方案都不需要手动计算滚动偏移量即可实现位置自动恢复：

方案1：绑定唯一PageStorageKey（最简单通用） #

Flutter内置的PageStorage会自动存储绑定了PageStorageKey的滚动组件的偏移量，在组件重建时自动恢复，是适用性最广的方案，单/多滚动组件场景都适用：

Scrollbar(
  child: SingleChildScrollView(
    // 赋值唯一的字符串作为key，同页面内多个滚动组件不要重复命名
    key: const PageStorageKey('long_content_scroll_key'),
    child: // 你的长内容组件
  )
)

方案2： State中持久化滚动控制器+保活 #

如果你的页面是StatefulWidget，且需要同时适配Tab切换、路由跳转返回等场景的滚动位置保留，可以用这个方案：

1. 不要在build方法中创建ScrollController，要定义在State类的顶层
2. 混入AutomaticKeepAliveClientMixin保持页面状态不被回收
   示例代码：

class _LongContentPageState extends State<LongContentPage> with AutomaticKeepAliveClientMixin {
  // 滚动控制器定义在State顶层
  final ScrollController _scrollController = ScrollController();

  // 开启页面保活
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 保活必须调用super.build
    super.build(context);
    return Scrollbar(
      controller: _scrollController,
      child: SingleChildScrollView(
        controller: _scrollController,
        child: // 长内容组件
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

方案3：全局配置useInheritedMediaQuery（适合Flutter 3.10+版本） #

如果你使用的是Flutter 3.10及以上版本，可以直接在根应用配置中开启useInheritedMediaQuery参数，横竖屏切换时不会强制重建整个子树，所有滚动组件的位置都会默认保留，不需要每个页面单独修改：

MaterialApp(
  // 开启该参数即可全局生效
  useInheritedMediaQuery: true,
  title: '你的应用名',
  home: const HomePage(),
)

注意事项 #

如果你的页面布局在横竖屏切换时会发生结构变化（比如竖屏单列、横屏双列），优先使用方案1的PageStorageKey，适配性更强，不需要额外处理布局变更带来的偏移兼容问题。

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