Flutter中如何跳转到目标页面的特定子组件或行？

需求说明 #

已经能通过Navigator实现基础页面跳转，但希望跳转到目标长页面的特定子组件位置（类似HTML锚点）；同时要求返回原页面时保留原位置，不改变原页面状态。目标页面采用SingleChildScrollView包裹Column，内部已拆分为多个独立Widget（如WKa、WKl等）。

实现方案 #

通过传递目标组件标识 + 滚动控制器定位的方式即可实现，具体步骤如下：

1. 改造目标页面，添加滚动控制器并接收定位参数

将目标页面CEA改为StatefulWidget（需维护滚动控制器状态），同时接收从原页面传递的目标组件Key：

class CEA extends StatefulWidget {
  // 接收要定位的目标组件Key
  final Key? targetKey;
  const CEA({super.key, this.targetKey});

  @override
  State<CEA> createState() => _CEAState();
}

class _CEAState extends State<CEA> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    // 页面渲染完成后执行滚动定位
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (widget.targetKey != null) {
        _scrollToTarget();
      }
    });
  }

  // 滚动到目标组件的核心方法
  void _scrollToTarget() {
    // 通过Key查找目标组件的渲染对象
    final renderObject = widget.targetKey!.currentContext?.findRenderObject();
    if (renderObject != null) {
      final renderBox = renderObject as RenderBox;
      // 计算目标组件在滚动视图中的偏移量
      final offset = renderBox.localToGlobal(Offset.zero, ancestor: _scrollController.context?.findRenderObject());
      // 带动画滚动到目标位置
      _scrollController.animateTo(
        offset.dy,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          controller: _scrollController, // 绑定滚动控制器
          child: Column(
            children: const [
              WKa(),
              WKl(key: Key('wk_2l')), // 确保目标组件有唯一Key
              // ...其他子Widget
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose(); // 销毁控制器，避免内存泄漏
    super.dispose();
  }
}

2. 原页面跳转时传递目标Key

在原页面的跳转代码中，直接传入目标组件的Key参数即可：

// 跳转到CEA页面并定位到WKl组件
Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => CEA(targetKey: const Key('wk_2l'))),
);

3. 关键注意事项

• 所有需要定位的子Widget必须设置唯一Key，比如你示例中WKl已设置Key('wk_2l')，直接复用即可。
• 使用addPostFrameCallback确保页面完全渲染后再执行滚动，避免找不到目标组件的渲染对象。
• 返回原页面时，Flutter页面栈会自动保留原页面状态，调用Navigator.pop(context)即可回到原位置，无需额外处理。

备选：命名路由传参实现 #

如果习惯使用pushNamed跳转，可通过路由参数传递目标Key：

1. 配置路由时解析参数：

MaterialApp(
  routes: {
    '/cea': (context) {
      final targetKey = ModalRoute.of(context)?.settings.arguments as Key?;
      return CEA(targetKey: targetKey);
    },
  },
);

2. 跳转时传递参数：

Navigator.pushNamed(context, '/cea', arguments: const Key('wk_2l'));

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