如何在 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 条命名路由。我希望它在单击特定选项卡时传递给正文。我该怎么做？

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() 需要 context 来找到包含 Navigator 路由的 Ancestor Widgets，现在你的 BottomNavigationBar 已经在 Root Widget-MaterialApp 中，不是 BottomNavigationBar 的祖先，它们在同一上下文中。

Answer 2

使用Navigator的pushNamed方法即可 Navigator.pushNamed（上下文，'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;
 },

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

How to use a named routes in a BottomNavigationBar in flutter?

list

navigationbar

flutter