GoRouter使用pushNamed跳转后返回，ListView滚动偏移丢失问题求助

方案1：用PageStorageKey自动保存滚动状态 #

Flutter的PageStorage组件会自动管理可滚动组件的滚动偏移，给ListView绑定一个唯一的PageStorageKey，就能让系统在页面切换时保存并恢复滚动位置。

代码示例：

class CardListPage extends StatelessWidget {
  // 定义唯一的PageStorageKey，确保同一页面的key不重复
  final _listStorageKey = const PageStorageKey('card_list_page');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('卡片列表')),
      body: ListView.builder(
        key: _listStorageKey,
        itemCount: 100,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: ListTile(
              title: Text('卡片 $index'),
              onTap: () => context.pushNamed('detail', params: {'id': '$index'}),
            ),
          );
        },
      ),
    );
  }
}

方案2：避免列表页被意外重建 #

如果PageStorageKey不生效，检查是否列表页在跳转返回时被重新实例化：

• 若列表页是StatefulWidget，尽量使用const构造器（无可变状态时）
• 不要在GoRouter的页面builder中每次都创建新的页面实例，比如用全局变量或依赖注入复用实例
• 确保父组件的重建不会导致列表页被重新创建（比如用const父组件或状态提升）

方案3：手动控制滚动偏移（兜底方案） #

如果自动保存失效，可通过ScrollController手动监听并保存滚动位置，返回时恢复：

代码示例：

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

  @override
  State<CardListPage> createState() => _CardListPageState();
}

class _CardListPageState extends State<CardListPage> {
  final _scrollController = ScrollController();
  double _lastScrollOffset = 0.0;

  @override
  void initState() {
    super.initState();
    // 监听滚动，实时保存偏移
    _scrollController.addListener(() {
      _lastScrollOffset = _scrollController.offset;
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 页面回到前台时，恢复滚动位置
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_scrollController.hasClients) {
        _scrollController.jumpTo(_lastScrollOffset);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('卡片列表')),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: ListTile(
              title: Text('卡片 $index'),
              onTap: () => context.pushNamed('detail', params: {'id': '$index'}),
            ),
          );
        },
      ),
    );
  }
}

注意：手动保存方式需确保页面状态在跳转期间不被销毁，若列表页会被dispose，可将偏移值存在全局状态管理（如Riverpod、Provider）中。

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