如何在颤动的BottomNavigationBar中使用命名路由？答案

【问题标题】：How to use a named routes in a BottomNavigationBar in flutter?如何在颤动的BottomNavigationBar中使用命名路由？
【发布时间】：2020-12-12 20:39:57
【问题描述】：

我正在使用BottomNavigationBar，当单击导航栏中的任何图标时。我希望它进入下一个屏幕。这就是我在这里使用命名路由的原因。

main.dart代码


import 'package:flutter/material.dart';

import 'Screens/profilePage1/profilePage1.dart';


void main() => runApp(MyStatefulWidget());

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;



  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/first': (context) => ProfilePage1(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/second': (context) => ProfilePage1(),
        '/third': (context) => ProfilePage1(),
        '/fourth': (context) => ProfilePage1(),
        '/fifth': (context) => ProfilePage1(),
      },
      home: Scaffold(
        
        body: Center(
          child: routes.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("")),
            BottomNavigationBarItem(
                icon: Icon(Icons.calendar_today), title: Text("")),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.account_circle,
                  size: 35,
                  color: Color(0xFF334192),
                ),
                title: Text("")),
            BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("")),
            BottomNavigationBarItem(
                icon: Icon(Icons.table_chart), title: Text("")),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Color(0xFF334192),
          unselectedItemColor: Colors.grey,
          onTap: (index){

          },
        ),
      ),
    );
  }
}

在这里，我创建了 5 条命名路线。我希望它在单击特定选项卡时传递给正文。我该怎么做？

【问题讨论】：

标签： list flutter navigationbar

【解决方案1】：

使用 Navigator.pushNamed()

onTap: (index){
  switch(index){
      case 0:
        Navigator.pushNamed(context, "/first");
        break;
      case 1:
        Navigator.pushNamed(context, "/second");
        break;
        ...etc
    }
 },

Navigator.pushedName() 需要 context 来查找包含 Navigator 路由的 Ancestor Widget，现在您的 BottomNavigationBar 已经在 Root Widget-MaterialApp，不是BottomNavigationBar的祖先，它们在同一个上下文中。

【讨论】：

为什么会出现这个错误？你能帮我解决这个问题吗？使用不包含 Navigator 的上下文请求的 Navigator 操作。用于从 Navigator 推送或弹出路由的上下文必须是作为 Navigator 小部件后代的小部件的上下文。
@AmanChaudhary 将您的 Scaffold 小部件提取到无状态/有状态小部件可能会解决该错误
这确实解决了问题，但这背后的原因是什么？
@Aman Chaudhary 这是因为您的“MyStatefulWidget”类没有 MaterialApp 作为父级。您可以在此处查看 Rémi Rousselet 的更多解释。 stackoverflow.com/a/51292613/7610338
使用开关设置默认值也是一种很好的做法：转到主屏幕/页面或错误屏幕/页面。 stackoverflow.com/questions/4649423/…

【解决方案2】：

只需使用 Navigator 的 pushNamed 方法 Navigator.pushNamed(context, 'Name'); https://api.flutter.dev/flutter/widgets/Navigator/pushNamed.html

 onTap: (index){
   switch (index) {
     case 0:
       Navigator.pushNamed(context, '/first');
     break;
     case 2:
       Navigator.pushNamed(context, '/second');
     break;
 },

【讨论】：