Flutter - 如何使用命名路由实现底部导航栏？

Question

我想实现一个带有命名路由的底部导航栏。似乎视图不断刷新，卡住，当我点击底部导航选项卡时，它们无法使用我的代码。

final _navigatorKey = GlobalKey<NavigatorState>();
  int currentIndex = 0;
  List<String> _pages = <String>[
    Routes.startupViewRoute,
    Routes.startupViewRoute,
    Routes.startupViewRoute,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: Routes.startupViewRoute,
        onGenerateRoute: Router().onGenerateRoute,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) {
          _navigatorKey.currentState.pushNamed(_pages[index]);
        },
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.person),
            title: new Text('Profile'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          )
        ],
      ),
    );

Answer 1

绝对使用路线名称更舒服。 它有几个步骤。 1. 在您要导航的屏幕上，添加一个包含 ex 路由的最终变量。 static const routeName = '/pageName'; （/很重要）

1. 您需要在主页添加： PageName.routeName:(ctx)=>PageName(),

2. 您要重定向到新页面的位置添加： Navigator.of(ctx).pushNamed(PageName.routeName); 你也可以通过它传递参数。