Flutter页面跳转过渡动画卡顿掉帧的优化解决方法有哪些？

核心优化逻辑为避免路由过渡动画的帧和Page B重度渲染的帧抢占CPU/GPU资源，把重度渲染逻辑延后到动画完全结束后执行，或提前在非动画时段完成初始化，可行方案如下：

方案1：延迟Page B重度组件初始化，等过渡动画完成后再渲染 #

这是最直接有效的方案，过渡动画期间只渲染轻量骨架屏，动画结束后再加载真实的Google Maps、Charts等组件，代码示例如下：

// Page B 实现
class PageB extends StatefulWidget {
  const PageB({super.key});

  @override
  State<PageB> createState() => _PageBState();
}

class _PageBState extends State<PageB> {
  bool _isTransitionCompleted = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 监听当前路由的过渡动画状态
      final currentRoute = ModalRoute.of(context);
      if (currentRoute?.animation != null) {
        currentRoute!.animation!.addStatusListener((status) {
          // 过渡动画完全结束后再加载真实内容
          if (status == AnimationStatus.completed) {
            setState(() => _isTransitionCompleted = true);
          }
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isTransitionCompleted
          ? Column(
              children: [
                // 真实的重度渲染组件：Google Maps、Charts等
              ],
            )
          // 过渡期间展示和真实布局结构一致的轻量骨架屏，无复杂渲染逻辑
          : const PageBSkeletonPlaceholder(),
    );
  }
}

你之前使用的Future.microtask不生效是因为微任务仍会在当前帧的调度周期内执行，还是会抢占动画的渲染资源，只有等动画完全结束后调度的任务才不会影响过渡流畅度。

方案2：提前预加载Page B实例 #

在Page A的生命周期中提前初始化Page B实例，将初始化耗时分散到Page A的空闲帧中，避免跳转时才执行初始化逻辑抢占动画资源：

// Page A 实现
class PageA extends StatefulWidget {
  const PageA({super.key});

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  // 提前预加载Page B实例
  late final PageB _preloadedPageB;

  @override
  void initState() {
    super.initState();
    _preloadedPageB = const PageB();
  }

  void _goToPageB() {
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (context) => _preloadedPageB),
    );
  }
}

注意如果Page B占用内存极高，需要在Page A销毁时做好相关资源的释放处理，避免内存泄漏。

方案3：用RepaintBoundary隔离重度渲染组件 #

路由动画和Page B的组件渲染如果共享同一个绘制层，会导致不必要的整体重绘，增加渲染耗时。给Page B的Google Maps、Charts等重度组件分别包裹RepaintBoundary，可以将它们的绘制和路由动画的绘制隔离，减少重绘范围：

RepaintBoundary(
  child: GoogleMap(
    // 地图配置
  ),
)
RepaintBoundary(
  child: LineChart(
    // 图表配置
  ),
)

方案4：开启Impeller渲染器（iOS端） #

如果你使用的Flutter版本在3.10及以上，开启iOS端的Impeller渲染器可以大幅提升动画和重度组件的渲染性能，80%以上的iOS端过渡掉帧问题都可以通过该方案解决。开启方式为在iOS项目的Info.plist中添加如下配置：

<key>FLTEnableImpeller</key>
<true/>

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