单击一个底部导航栏项（并加载相关页面）时隐藏底部导航栏 - Flutter

Question

我在一个文件中单独定义了一个底部导航栏，包含 5 个项目，并加载了 5 个页面（没有定义底部导航栏）。它应该出现在已加载的 4 个页面上，但应该在第 5 个页面上消失 (CHAT)。我在网上找到的所有解决方案都是指在向上或向下滚动时隐藏栏，我认为我非常接近预期的结果，但我还没有整理出来......生成该“控制器”的代码BN-Bar 在下方，也是底部的截图。谢谢。

class BottomNavigationBarController extends StatefulWidget {
  @override
  _BottomNavigationBarControllerState createState() =>
      _BottomNavigationBarControllerState();
}

class _BottomNavigationBarControllerState
    extends State<BottomNavigationBarController> {
  final List<Widget> pages = [
    MyHome(
      key: PageStorageKey('Page1'),
    ),
    MyStats(
      key: PageStorageKey('Page2'),
    ),
    MyCategories(
      key: PageStorageKey('Page3'),
    ),
    MyPeopleList(
      key: PageStorageKey('Page4'),
    ),
    MyChat(
      key: PageStorageKey('Page5'),
    ),
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  int _selectedIndex = 0;

  Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: selectedIndex,
        type: BottomNavigationBarType.fixed,
        //
        iconSize: 24,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
              'HOME',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.insert_chart),
            title: Text(
              'STATS',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.view_list),
            title: Text(
              'INVENTORY',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            title: Text(
              'PEOPLE',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.forum),
            title: Text(
              'CHAT',
            ),
          ),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      body: PageStorage(
        child: pages[_selectedIndex],
        bucket: bucket,
      ),
    );
  }
}

Answer 1

我在底部使用了 IF/Else：

@override
  Widget build(BuildContext context) {
    if (_selectedIndex < 4) {
      return Scaffold(
        bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
        body: PageStorage(
          child: pages[_selectedIndex],
          bucket: bucket,
        ),
      );
    } else {
      return Scaffold(
        body: PageStorage(
          child: pages[_selectedIndex],
          bucket: bucket,
        ),
      );
    }
  }