Flutter中CupertinoNavigationBar结合根导航器时性能极差问题求助

问题场景 #

当同时满足以下条件时，iPhone设备上使用CupertinoNavigationBar会出现页面切换时严重卡顿、掉帧的情况：

• 包含CupertinoNavigationBar的CupertinoPageScaffold是CupertinoTabScaffold中的标签页面
• 使用根导航器（设置rootNavigator: true）推送新页面

验证结论 #

• 注释掉CupertinoNavigationBar后，应用页面切换恢复流畅
• 若不使用根导航器（新页面在当前标签内的导航栈中展示），则无卡顿问题，但不符合业务需求
• 移除CupertinoTabScaffold后，卡顿问题完全消失
• 该问题在iPhone的profile模式下依然存在

最小复现代码 #

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  static const homePages = [
    HistoryPage(),
    MetricsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBuilder: (_, index) => CupertinoTabView(
        builder: (_) => homePages[index],
      ),
      tabBar: CupertinoTabBar(
        items: const [
          BottomNavigationBarItem(
            label: 'History',
            icon: Icon(CupertinoIcons.square_list),
            activeIcon: Icon(CupertinoIcons.square_list_fill),
          ),
          BottomNavigationBarItem(
            label: 'Metrics',
            icon: Icon(CupertinoIcons.chart_bar_square),
            activeIcon: Icon(CupertinoIcons.chart_bar_square_fill),
          ),
        ],
      ),
      resizeToAvoidBottomInset: false,
    );
  }
}

class HistoryPage extends StatelessWidget {
  const HistoryPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('History Tab'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(CupertinoIcons.add),
          onPressed: () {
            Navigator.of(context, rootNavigator: true)
                .push(CupertinoPageRoute(builder: (context) => const SimplePage()));
          },
        ),
      ),
      child: const Center(
        child: Text('This is the History Tab'),
      ),
    );
  }
}

class MetricsPage extends StatelessWidget {
  const MetricsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Metrics Tab'),
      ),
      child: Center(
        child: Text('This is the Metrics Tab'),
      ),
    );
  }
}

class SimplePage extends StatelessWidget {
  const SimplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Simple Page'),
        trailing: CupertinoButton(
          child: const Icon(CupertinoIcons.add),
          onPressed: () {
            Navigator.of(context, rootNavigator: true)
                .push(CupertinoPageRoute(builder: (context) => const SimplePage()));
          },
        ),
      ),
      child: const Center(
        child: Text('This is a simple page'),
      ),
    );
  }
}

问题原因分析 #

CupertinoTabScaffold的每个CupertinoTabView都维护着独立的导航栈，当使用根导航器推送页面时，CupertinoNavigationBar的内部动画逻辑会与标签页的导航栈状态产生冲突，触发UI线程的过度绘制或不必要的组件重绘。iOS的渲染机制对这类冲突更为敏感，进而放大为明显的卡顿掉帧现象。

解决方案 #

方案1：自定义导航栏替代官方组件

手动实现仿iOS风格的导航栏，避开官方CupertinoNavigationBar的内部动画冲突逻辑：

class CustomCupertinoNavBar extends StatelessWidget {
  final String title;
  final Widget? trailing;

  const CustomCupertinoNavBar({super.key, required this.title, this.trailing});

  @override
  Widget build(BuildContext context) {
    final topPadding = MediaQuery.of(context).padding.top;
    return Container(
      height: topPadding + 44,
      padding: EdgeInsets.only(top: topPadding),
      color: CupertinoColors.systemBackground,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          CupertinoButton(
            padding: EdgeInsets.zero,
            child: const Icon(CupertinoIcons.back),
            onPressed: () => Navigator.pop(context),
          ),
          Text(
            title,
            style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
          ),
          trailing ?? const SizedBox(width: 44),
        ],
      ),
    );
  }
}

使用时直接替换原代码中的CupertinoNavigationBar即可。

方案2：调整根导航器推送方式

将新页面以全屏弹窗形式推送（设置fullscreenDialog: true），减少导航栏之间的动画层级冲突：

// 替换原推送逻辑
Navigator.of(context, rootNavigator: true).push(
  CupertinoPageRoute(
    fullscreenDialog: true,
    builder: (context) => const SimplePage(),
  ),
);

方案3：优化组件状态与重绘

确保标签页内的页面使用const构造函数（示例中已实现），避免不必要的组件重建。同时可以给标签页页面添加AutomaticKeepAliveClientMixin，保持标签页状态，减少切换标签时的重绘开销（对根导航器卡顿有一定缓解作用）：

class HistoryPage extends StatefulWidget {
  const HistoryPage({Key? key}) : super(key: key);

  @override
  State<HistoryPage> createState() => _HistoryPageState();
}

class _HistoryPageState extends State<HistoryPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CupertinoPageScaffold(
      // 原导航栏与内容代码
    );
  }
}

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