Question

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

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;
    });
  }
}

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

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

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

1 个答案: