List 如何在Flatter中使用底部导航栏中的命名路由？

我正在使用

BottomNavigationBar

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

main.dart

code

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){

          },
        ),
      ),
    );
  }
}

进口“包装：颤振/材料.省道”；
导入“Screens/profilePage1/profilePage1.dart”；
void main（）=>runApp（MyStatefulWidget（））；
类MyStatefulWidget扩展了StatefulWidget{
@凌驾
_MyStatefulWidgetState createState（）=>\u MyStatefulWidgetState（）；
}
类_MyStatefulWidgetState扩展状态{
int _selectedIndex=0；
void\u未映射（整数索引）{
设置状态（）{
_selectedIndex=索引；
});
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
路线：{
//当导航到“/”路径时，构建FirstScreen小部件。
“/first”：（上下文）=>ProfilePage1（），
//导航到“/second”路径时，构建SecondScreen小部件。
“/second”：（上下文）=>ProfilePage1（），
“/third”：（上下文）=>ProfilePage1（），
“/fourth”：（上下文）=>ProfilePage1（），
“/fifth”：（上下文）=>ProfilePage1（），
},
家：脚手架(
正文：中(
子级：routes.elementAt（_selectedIndex），
),
底部导航栏：底部导航栏(
项目：[
BottomNavigationBarItem（图标：图标（Icons.home），标题：文本（“”），
底部导航气压计(
图标：图标（Icons.calendar_today），标题：文本（“”），
底部导航气压计(
图标：图标(
Icons.account_圈，
尺码：35，
颜色：颜色（0xFF334192），
),
标题：文本（“”），
BottomNavigationBarItem（图标：图标（Icons.message），标题：文本（“”），
底部导航气压计(
图标：图标（图标、表格、图表），标题：文本（“”），
],
currentIndex:_selectedIndex，
选择编辑颜色：颜色（0xFF334192），
unselectedItemColor:Colors.grey，
onTap：（索引）{
},
),
),
);
}
}

---

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

使用Navigator.pushNamed（）

onTap：（索引）{
开关（索引）{
案例0：
Navigator.pushNamed（上下文，“/first”）；
打破
案例1：
Navigator.pushNamed（上下文，“/second”）；
打破
等
}
},

---

Navigator.pushedName（）需要上下文来查找包含导航器路由的祖先小部件，现在您的底部导航栏已经位于根小部件-MaterialApp，而不是底部导航栏的祖先，它们在相同的上下文中。

只需使用导航器的命名方法即可 pushNamed（上下文“Name”）；

---

为什么会出现这个错误？你能帮我吗？使用不包含导航器的上下文请求的导航器操作。用于从导航器推送或弹出路由的上下文必须是导航器小部件的后代小部件的上下文。@AmanChaudhary将脚手架小部件提取到无状态/有状态小部件可能会解决错误这确实解决了问题，但这背后的原因是什么？@Aman Chaudhary这是因为“MyStatefulWidget”类没有解决问题将MaterialApp作为父对象。你可以在这里从Rémi Rousselet那里了解更多的解释。使用开关设置默认值也是一个很好的做法：即进入主屏幕/页面或错误屏幕/页面。

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