如何在颤动的底部导航栏中添加抽屉？

Posted 2023-02-23

【中文标题】如何在颤动的底部导航栏中添加抽屉？

【英文标题】：How to add drawer in bottom navigation bar in flutter?

【发布时间】：2020-06-06 19:48:29

【问题描述】：

我想在用户点击第四个（more_vert）图标时显示一个抽屉，但我无法实现它。在我当前的实现中，当单击第 4 个图标时，flutter 会将我带到一个新页面，并显示抽屉不在当前屏幕上。我究竟做错了什么 ？另外，BottomNavigationBar 和 BottomAppBar 之间的区别是什么，我在任何地方都找不到区别。我查看了几篇文章，我认为 BottomAppBar 用于显示 Fab 浮动在底部应用程序栏中。两者之间是否还有其他区别，何时应该使用一种而不是另一种。

class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  List<Widget> _widgetOptions = <Widget>[
    Page1(),
    Page2(),
    Page3(),
    Page4(),   // this page implements the drawer

  ];
  int _currentSelected = 0;

  void _onItemTapped(int index) 
    setState(() 
      _currentSelected = index;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: _widgetOptions.elementAt(_currentSelected),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: _onItemTapped,
        currentIndex: _currentSelected,
        showUnselectedLabels: true,
        unselectedItemColor: Colors.grey[800],
        selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
             icon: Icon(AntDesign.carryout),
          ),
          BottomNavigationBarItem(
             icon: Icon(MaterialCommunityIcons.sack),
          ),
          BottomNavigationBarItem(
             icon: Icon(Octicons.archive),
          ),
          BottomNavigationBarItem(
             icon: Icon(Icons.more_vert),
          )
        ],
      ),
      // backgroundColor: Colors.black,
    );
  

【问题讨论】：

你有没有检查过这个可以帮助你的链接：***.com/questions/56007613/…

【参考方案1】：

您不需要额外的页面。 你可以这样做：

class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  List<Widget> _widgetOptions = <Widget>[
    Page(),
    Page(),
    Page(),
  ];
  int _currentSelected = 0;
  GlobalKey<ScaffoldState> _drawerKey = GlobalKey();

  void _onItemTapped(int index) 
    index == 3
        ? _drawerKey.currentState.openDrawer()
        : setState(() 
            _currentSelected = index;
          );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      key: _drawerKey,
      body: _widgetOptions.elementAt(_currentSelected),
      drawer: Drawer(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: _onItemTapped,
        currentIndex: _currentSelected,
        showUnselectedLabels: true,
        unselectedItemColor: Colors.grey[800],
        selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('Page 1'),
            icon: Icon(Icons.access_alarm),
          ),
          BottomNavigationBarItem(
            title: Text('Page 2'),
            icon: Icon(Icons.accessible),
          ),
          BottomNavigationBarItem(
            title: Text('Page 3'),
            icon: Icon(Icons.adb),
          ),
          BottomNavigationBarItem(
            title: Text('Drawer'),
            icon: Icon(Icons.more_vert),
          )
        ],
      ),
    );
  


class Page extends StatelessWidget 
  const Page(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container();
  

为实现抽屉的 Scaffold 添加 GlobalKey 并在根 Scaffold 中实现 Drawer。

【参考方案2】：

BottomNavigationBar 不像 AppBar 那样显示抽屉图标。

以编程方式打开抽屉：

将此变量创建为状态：

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

将其设置为 Scaffold 的键：

Scaffold(
      key: _scaffoldKey,

然后，就可以用钥匙状态打开抽屉了：

_scaffoldKey.currentState.openDrawer();