Question

我在flutter中使用底部导航选项卡栏，如果我们单击选项卡，它将导航到另一个屏幕。在这里，我使用的是选项卡点击的方法，还将当前索引分配给索引，但是当我点击图标时使用底部导航选项卡导航屏幕，单击该选项卡时我想隐藏该选项卡`

 int _currentIndex = 0;

最终列表_screens = [

new HomeTab(),
new Loginpage(),
new HomeTab(),
new CartTab(),
new HomeTab(),

];

return Scaffold(


  body:
  _screens[_currentIndex],

  bottomNavigationBar: isBottomBarVisible ?  new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      unselectedItemColor: Colors.grey,
      selectedItemColor: Colors.orange,
      onTap: onTabTapped, // new
    currentIndex: _currentIndex,
      items: [
        new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
        new BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text("Search")),
        new BottomNavigationBarItem(icon: new Icon(Icons.notifications_none), title: new Text("Notifications")),
        new BottomNavigationBarItem(icon: new Icon(Icons.shopping_basket), title: new Text("Bag")),
        new BottomNavigationBarItem(icon: new Icon(Icons.person_outline), title: new Text("Account"))
      ]): Container(

  ),

);

}

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

}

Answer 1

一种方法是使用布尔值标志来跟踪底部栏的可见性，然后使用此标志将其添加或不添加到小部件树中：

    bool isBottomBarVisible = true;

...
...

    bottomNavigationBar: isBottomBarVisible ? new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      unselectedItemColor: Colors.grey,
      selectedItemColor: Colors.orange,
      onTap: onTabTapped, // new
    currentIndex: _currentIndex,
      items: [
        new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
        new BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text("Search")),
        new BottomNavigationBarItem(icon: new Icon(Icons.notifications_none), title: new Text("Notifications")),
        new BottomNavigationBarItem(icon: new Icon(Icons.shopping_basket), title: new Text("Bag")),
        new BottomNavigationBarItem(icon: new Icon(Icons.person_outline), title: new Text("Account"))
      ]) : Container(),

如果isBottomBarVisible为true，则将BottomNavigationBar添加到小部件树，否则添加的小部件为空Container。因此，您可以通过在调用BottomNavigationBar方法时将isBottomBarVisible设置为true来处理onTabTapped的可见性。

如何在轻按Tab时隐藏底部导航标签栏

1 个答案: