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

Question

我正在使用 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个命名路由，我希望当特定的选项卡被点击时，将其传递给主体。我该怎么做？

- Aman Chaudhary

Answer 1

使用 Navigator.pushNamed()

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

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

- sleepingkit

---

为什么会出现这个错误？你能帮我解决一下吗？ 使用不包含Navigator的上下文请求Navigator操作。 用于从Navigator中推送或弹出路由的上下文必须是Navigator widget的后代widget。 - Aman Chaudhary

@AmanChaudhary 将你的 Scaffold Widget 提取到 Stateless/Stateful Widget 中可能会解决这个错误。 - sleepingkit

这解决了问题，但背后的原因是什么？ - Aman Chaudhary

@Aman Chaudhary，这是因为你的'MyStatefulWidget'类没有MaterialApp作为父级。你可以在此处查看Rémi Rousselet的更多解释。https://dev59.com/5lcP5IYBdhLWcg3wr74G#51292613 - Bancha Rajainthong

在使用 switch 语句时，加上一个默认的分支是一个好习惯，可以让程序跳转到主屏幕/页面或错误屏幕/页面。https://dev59.com/hm445IYBdhLWcg3w5OEH - Alexandre Jean

Answer 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;
 },

- Bancha Rajainthong