Flutter：跨页面跳转后自动滚动到指定位置的实现方法

要实现从PageTwo跳转到PageOne后自动滚动到指定位置，有两种实用方案，根据你的场景选择即可：

方案1：传递滚动偏移量，初始化时自动滚动 #

适合提前知道具体滚动像素值的场景，步骤简单直接：

• PageTwo跳转时，把目标滚动偏移量作为参数传给PageOne
• PageOne内部通过ScrollController，在页面渲染完成后执行滚动

代码示例：

// PageTwo的按钮点击逻辑
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PageOne(targetOffset: 500.0), // 传递目标偏移量
      ),
    );
  },
  child: Text('跳转到PageOne并滚动'),
)

// PageOne的实现
class PageOne extends StatefulWidget {
  final double targetOffset;

  const PageOne({super.key, required this.targetOffset});

  @override
  State<PageOne> createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    // 页面渲染完成后执行滚动
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _scrollController.animateTo(
        widget.targetOffset,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageOne')),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    );
  }
}

方案2：用GlobalKey定位指定Widget（锚点效果） #

如果不知道具体偏移量，只想精准滚动到某个特定Widget，用GlobalKey就能实现类似网页锚点的效果：

• 在PageOne中给目标Widget绑定GlobalKey
• 跳转时传递一个标识，告诉PageOne要滚动到哪个Widget
• PageOne初始化时，通过GlobalKey获取Widget的位置，再执行滚动

代码示例：

// PageOne的实现，提前定义锚点GlobalKey
class PageOne extends StatefulWidget {
  // 接收要滚动到的目标锚点标识
  final String targetAnchor;

  const PageOne({super.key, required this.targetAnchor});

  @override
  State<PageOne> createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  final ScrollController _scrollController = ScrollController();
  // 定义多个锚点的GlobalKey
  final GlobalKey _anchorKey1 = GlobalKey();
  final GlobalKey _anchorKey2 = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _scrollToAnchor();
    });
  }

  void _scrollToAnchor() {
    GlobalKey? targetKey;
    // 根据传进来的标识匹配对应的GlobalKey
    switch (widget.targetAnchor) {
      case 'anchor1':
        targetKey = _anchorKey1;
        break;
      case 'anchor2':
        targetKey = _anchorKey2;
        break;
    }

    if (targetKey != null) {
      final RenderBox renderBox = targetKey.currentContext!.findRenderObject() as RenderBox;
      final offset = renderBox.localToGlobal(Offset.zero);
      // 滚动到目标位置，注意减去AppBar高度避免被遮挡
      _scrollController.animateTo(
        offset.dy - kToolbarHeight,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageOne')),
      body: ListView(
        controller: _scrollController,
        children: [
          ...List.generate(20, (index) => ListTile(title: Text('普通条目 $index'))),
          // 第一个锚点Widget
          Container(
            key: _anchorKey1,
            padding: const EdgeInsets.all(16),
            color: Colors.blue[100],
            child: const Text('锚点1：目标位置'),
          ),
          ...List.generate(20, (index) => ListTile(title: Text('普通条目 ${20 + index}'))),
          // 第二个锚点Widget
          Container(
            key: _anchorKey2,
            padding: const EdgeInsets.all(16),
            color: Colors.green[100],
            child: const Text('锚点2：目标位置'),
          ),
          ...List.generate(20, (index) => ListTile(title: Text('普通条目 ${40 + index}'))),
        ],
      ),
    );
  }
}

// PageTwo的跳转逻辑
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const PageOne(targetAnchor: 'anchor2'), // 指定要滚动到锚点2
      ),
    );
  },
  child: const Text('跳转到PageOne并滚动到锚点2'),
)

补充说明 #

• 用animateTo是平滑滚动，用jumpTo是瞬间跳转，根据需求选择
• 如果页面有固定头部（比如AppBar），计算偏移量时记得减去对应高度，避免目标Widget被遮挡
• 复杂场景下也可以用Provider、Riverpod这类状态管理工具，但上面两种方案已经能覆盖大部分普通需求

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