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

Posted 2023-02-23

【中文标题】如何在颤动的BottomNavigationBar中使用命名路由？

【英文标题】：How to use a named routes in a BottomNavigationBar in flutter?

【发布时间】：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 条命名路线。我希望它在单击特定选项卡时传递给正文。我该怎么做？

【参考方案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 的更多解释。 ***.com/a/51292613/7610338

使用开关设置默认值也是一种很好的做法：转到主屏幕/页面或错误屏幕/页面。 ***.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;
 ,