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

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

1 个答案: