Flutter Navigator 和 IndexedStack widget 的问题

问：

我正在尝试将 BottomNavigator 与每个选项卡的嵌套导航一起使用，同时保留状态。并使用 IndexedStack 中的 Navigator 小部件实现了这一点。但我正面临一个问题。当我在选项卡中从第一页导航到第二页时，我看到延迟。

这是我的代码 -

import 'package:flutter/material.dart';
final navKeyBooks = GlobalKey<NavigatorState>();

final navKeyCoffee = GlobalKey<NavigatorState>();

final navKeyMovies = GlobalKey<NavigatorState>();

final navKeys = [navKeyBooks, navKeyCoffee, navKeyMovies];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Nav Bar',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
          useMaterial3: false),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedIndex = 0;

  Future<bool> _systemBackButtonPressed() {
    if (navKeys[selectedIndex].currentState!.canPop()) {
      navKeys[selectedIndex]
          .currentState!
          .pop(navKeys[selectedIndex].currentContext);
      return Future.value(false);
    } else {
      // SystemChannels.platform.invokeMethod<void>('SystemNavigator.pop');
      return Future.value(true);
    }
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _systemBackButtonPressed(),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Bottom Nav Bar'),
        ),
        body: IndexedStack(
          index: selectedIndex,
          children: const [
            BooksNavigator(),
            CoffeeNavigator(),
            MovieNavigator()
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.book),
              label: 'Books',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.coffee),
              label: 'Coffee',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.movie),
              label: 'Movie',
            ),
          ],
          currentIndex: selectedIndex,
          onTap: (value) {
            setState(() {
              selectedIndex = value;
            });
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navKeyBooks,
      initialRoute: '/',
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
            settings: settings,
            builder: (context) {
              switch (settings.name) {
                case '/':
                  return const Books1();
                case '/2':
                  return const Books2();
                default:
                  print('Books Error');
                  return const Center(child: Text('Books Error'));
              }
            });
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('Books1 build');
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Books1'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/2');
            },
            child: const Text('Next Page'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('Books2 build');
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Books2'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Back'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navKeyCoffee,
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
            settings: settings,
            builder: (context) {
              switch (settings.name) {
                case '/':
                  return const Coffee1();
                case '/2':
                  return const Coffee2();
                default:
                  return const Center(child: Text('Coffee Error'));
              }
            });
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Coffee1'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/2');
            },
            child: const Text('Next Page'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Coffee2'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Back'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navKeyMovies,
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
            settings: settings,
            builder: (context) {
              switch (settings.name) {
                case '/':
                  return const Movie1();
                case '/2':
                  return const Movie2();
                default:
                  return const Center(child: Text('Movie Error'));
              }
            });
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Movie1'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/2');
            },
            child: const Text('Next Page'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Movie2'),
          const SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Back'),
          )
        ],
      ),
    );
  }
}

在此处查看问题