如何在Flutter中用底部导航项切换TabBar的可见性

Question

我的bottomNavigationBar应用中有AppBar和flutter。 AppBar的底部是TabBar，由两个项目组成。因此，我希望单击TabBar的某些项目时BottomNavigationBar不可见。我尝试使用TabBar变量将Visibility类分配给Boolean，但是它不起作用。似乎我无法单独处理TabBar小部件。

如何解决这个问题？

     class DashBoardPage extends StatefulWidget {
  @override
  _DashBoardPageState createState() => _DashBoardPageState();
}

class _DashBoardPageState extends State<DashBoardPage> {
  SharedPreferences sharedPreferences;
  bool showTabs = false;
  int tabsIndex = 0;
  int _currentIndex = 0;
  String _appBarText = "Welcome, User";

  Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0:
        showTabs = true;
        _appBarText = "Welcome, User";
          return TabBarView(
           children:[
             new HomePage(),
             new SchedulePage()
           ]
          );
         break;
      case 1:
        showTabs = false;
        _appBarText = "Mentoring  Board";
        return MentoringBoardPage();
        break;
      case 2:
        showTabs = false;
        _appBarText = "Resources";
        return ResourcesPage();
        break;
      default:
        return HomePage();
    }
  }

  @override
  void initState() {
    super.initState();
    checkLoginState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MAF Mentor',
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFFFFFFF),
          title: Text(
            _appBarText,
            style: TextStyle(
              color: Color(0xFF1C2447),
              fontFamily: 'Muli',
              fontSize: 16.0,
            ),
          ),
          bottom:  showTabs? TabBar(
            isScrollable: true,
            tabs: choices.map<Widget>((Choice choice) {
              return Tab(
                text: choice.title,
                icon: Icon(choice.icon),
              );
            }).toList(),
            labelColor: Color(0xFF1C2447),
          ):null,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.account_circle,
                color: Color(0xFF1C2447),
              ),
              onPressed: () {
                Navigator.of(context).pushNamed('/profile_page');
              },
            ),
            IconButton(
              icon: Icon(
                Icons.notifications,
                color: Color(0xFF1C2447),
              ),
              onPressed: () {
                // do something
              },
            ),
          ],
        ), //AppBar
        body: callPage(_currentIndex),
        bottomNavigationBar: BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          fixedColor: Color(0xFF1C2447),
          currentIndex: _currentIndex,
          onTap: (value) {
            _currentIndex = value;
            callPage(_currentIndex);
            setState(() {

            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("Home")),
            BottomNavigationBarItem(
                icon: Icon(Icons.people), title: Text("Mentoring Board")),
            BottomNavigationBarItem(
                icon: Icon(Icons.history), title: Text("Resources"))
          ],
        ),
      ),
      ),
    );
  }

  Future checkLoginState() async {
    sharedPreferences = await SharedPreferences.getInstance();
    if (sharedPreferences.getString("token") == null) {
      Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(builder: (BuildContext context) => LoginScreen()),
          (Route<dynamic> route) => false);
    }
  }
}

Answer 1

[bottom需要一个PreferredSizeWidget，因此您不能在那里使用Visibility小部件。您可以使用布尔变量来做到这一点。您可以在下面查看整个代码。由于我不知道您的选择和标签，因此我随机放置了一些内容。但想法是，当用户点击TabBar时是否要显示BottomNavigationBarItem数字1，您只需将布尔变量更新为true。否则将其设为假。

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  bool showTabs = false;
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFFFFFFF),
          title: Text(
            '_appBarText',
            style: TextStyle(
              color: Color(0xFF1C2447),
              fontFamily: 'Muli',
              fontSize: 16.0,
            ),
          ),
          bottom: showTabs
              ? TabBar(
                  isScrollable: true,
                  tabs: <Widget>[
                    Tab(
                      text: 'Choice1',
                      icon: Icon(Icons.add_circle_outline),
                    ),
                    Tab(
                      text: 'Choice1',
                      icon: Icon(Icons.add_circle),
                    ),
                  ],
                  labelColor: Color(0xFF1C2447),
                )
              : null,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: selectedIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('first')),
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('second')),
          ],
          onTap: (index) {
            if (index == 1) {
              setState(() => showTabs = true);
            } else {
              setState(() => showTabs = false);
            }
            setState(() => selectedIndex = index);
          },
        ),
      ),
    );
  }
}