Futter CupertinoNavigationBar очень плохая производительность с корневым навигатором

По неизвестным причинам я обнаружил, что огромные лаги и падения кадров возникают при переходе между страницами при выполнении следующих условий:

  • его родитель,, представляет собой страницу, отображаемую в
  • корневой навигатор используется для перемещения страницы.

Я смог это выяснить, когда прокомментировал свойпотому что тогда приложение снова стало гладким.

Кроме того, я не вижу проблем, если я не использую корневой навигатор (то есть новая страница отображается на активной вкладке), но это не то, что я хочу делать.

Наконец, чтобы проверить мою теорию, если нет, то у меня вообще нет этой проблемы.

Моя проблема возникает только на iPhone, даже в режиме профиля.


Ниже приведен минимальный воспроизводимый пример:

      import 'package:flutter/cupertino.dart';

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

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

  // This widget is the root of your application.
  @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'),
      ),
    );
  }
}

Попробуйте закомментировать панель навигации и разместить кнопку в дочернем элементе вместо текста, и обратите внимание, насколько по-разному она работает.

0 ответов

Другие вопросы по тегам