Flutter中如何判断新push的页面转场动画已完全执行完成？

原有方案的缺陷 #

硬编码200ms固定延迟的适配性极差，不同系统版本、设备性能、自定义转场动画的时长都存在差异，很容易出现提前加载高成本组件导致转场卡顿，或是延迟过长导致用户等待时间冗余。

最优实现（无需修改原有跳转逻辑） #

直接在第二个页面内部监听路由转场完成事件即可，代码如下：

class SecondScreenState extends State<SecondScreen> {
  // 标记转场动画是否完成
  bool _isTransitionCompleted = false;

  @override
  void initState() {
    super.initState();
    _initAfterTransition();
  }

  Future<void> _initAfterTransition() async {
    // 获取当前页面对应的路由实例
    final currentRoute = ModalRoute.of(context);
    if (currentRoute != null) {
      // 等待转场动画完全执行结束
      await currentRoute.completed;
    }
    if (!mounted) return;
    // 更新状态，加载高成本组件
    setState(() {
      _isTransitionCompleted = true;
    });
    // 此处执行高成本的初始化逻辑：数据请求、复杂计算等
    _loadHeavyResource();
  }

  void _loadHeavyResource() {
    // 你的高成本业务逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("第二页")),
      body: _isTransitionCompleted
          ? _buildCostlyWidget() // 转场完成后再渲染高成本组件
          : const Center(child: CircularProgressIndicator()), // 转场期间展示轻量占位UI
    );
  }

  Widget _buildCostlyWidget() {
    // 你的高成本Widget实现
    return const SizedBox();
  }
}

方案说明 #

• ModalRoute.of(context).completed是Flutter框架原生提供的路由生命周期回调，会在页面入栈转场动画100%执行完成后自动触发，完美适配所有场景的转场时长，无需硬编码延迟时间。
• 增加mounted判断避免页面在转场过程中被销毁时，调用setState抛出异常。
• 转场过程中仅渲染轻量的占位元素（骨架屏、加载指示器均可），保证转场动画全程无高成本渲染操作，彻底解决转场卡顿问题。

进阶优化建议 #

如果高成本组件首次渲染耗时仍然过长，可以配合以下手段进一步优化：

• 用RepaintBoundary包裹高成本组件，隔离渲染区域避免影响其他元素
• 高成本计算逻辑放到compute中执行，避免阻塞UI线程
• 对列表类高成本组件做分页/懒加载渲染

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