如何解决从底部导航栏导航至独立屏幕
以下是我用于底部导航的代码
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>
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。