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

Question

我的 flutter 应用程序中有一个 bottomNavigationBar 和一个 AppBar。 AppBar 的底部是一个 TabBar ，由两个项目组成。所以我希望 TabBar 在单击 BottomNavigationBar 的某些项目时不可见。我尝试使用 Boolean 变量将可见性 class 分配给我的 TabBar，但它不起作用。看来我无法单独处理 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;
        break;
      case 2:
        showTabs = false;
        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("Bar 1")),
            BottomNavigationBarItem(
                icon: Icon(Icons.people), title: Text("Bar 2")),
            BottomNavigationBarItem(
                icon: Icon(Icons.history), title: Text("Bar 3"))
          ],
        ),
      ),
      ),
    );
  }

Answer 1

bottom 需要 PreferredSizeWidget，因此您不能在那里使用 Visibility 小部件。您可以使用布尔变量来做到这一点。您可以在下面看到完整的代码。因为我不知道你的选择和标签，所以我随机放了一些东西。但是这个想法是，如果你想在用户点击 BottomNavigationBarItem 时显示 TabBar 数字 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);
          },
        ),
      ),
    );
  }
}

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

How to toggle visibility of TabBar with Bottom Navigation Items in Flutter

tabbar

flutter