从底部导航栏导航至独立屏幕

问题描述

以下是我用于底部导航的代码

class NaviBottom extends StatefulWidget {
  @override
  _NaviBottomState createState() => _NaviBottomState();
}

class _NaviBottomState extends State<NaviBottom> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomeScreen(),AddProperties(),MyFavProperties(),MyProfile(),Login()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Open Houze")),body: _children[_currentIndex],bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,selectedItemColor: Colors.black,unselectedItemColor: Colors.white,onTap: onTabTapped,currentIndex: _currentIndex,items: [
          BottomNavigationBarItem(
              icon: new Icon(Icons.home),title: new Text('First')),BottomNavigationBarItem(
              icon: new Icon(Icons.mail),title: new Text('Second')),BottomNavigationBarItem(
              icon: Icon(Icons.person),title: Text('Third')),title: Text('Forth')),title: Text('Fifith'))
        ],),);
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

在此过程中，我的前三个选项卡视图将与底部导航栏一起显示，而当我单击后两个选项卡时，我需要导航并显示其他没有BottomNavigation栏的屏幕，

解决方法

void onTabTapped(int index) {
  if(index >= 0 && index < 3)
    setState(() {
      _currentIndex = index;
    });
  if(index == 3)
    Navigator.push(
      context,MaterialPageRoute(builder: (context) => FourthPage()),);
  if(index == 4)
    Navigator.push(
      context,MaterialPageRoute(builder: (context) => FifthPage()),);
}

N.B：Dart具有类型推断，这意味着如果类型明确，则无需注释。因此，您只需键入final _children并删除List<Widget>。