Flutter 从底部导航栏导航到独立屏幕答案

【问题标题】：Flutter Navigate to Independent screen from BottomNavigation barFlutter 从底部导航栏导航到独立屏幕
【发布时间】：2020-08-15 20:51:05
【问题描述】：

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

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')),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Forth')),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Fifith'))
        ],
      ),
    );
  }

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

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

【问题讨论】：

您好，我有一个问题，您打算如何导航回前三个选项卡？我建议您从前三个标签导航到“无表格”屏幕
您可以使用 Navigator.of(context).push() 将屏幕推送到选项卡式屏幕上。按下后退按钮后，它还会将您带回选项卡式屏幕。

标签： flutter navigation bottomnavigationview

【解决方案1】：

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>。

【讨论】：