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'),
),
);
}
}
Попробуйте закомментировать панель навигации и разместить кнопку в дочернем элементе вместо текста, и обратите внимание, насколько по-разному она работает.