flutter - 如何在 flutter 的底部导航栏中添加抽屉？

Question

当用户单击第 4 个( more_vert )图标时，我想显示一个抽屉，但我无法实现它。在我当前的实现中，当单击第 4 个图标时，flutter 会将我带到一个新页面，并且显示抽屉没有按应有的方式显示在当前屏幕上。我究竟做错了什么 ？另外BottomNavigationBar 和BottomAppBar 之间有什么区别我在任何地方都找不到区别。我查看了几篇文章，我认为BottomAppBar用于显示底部应用栏中 float 的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,
    );
  }
}

Answer 1

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

以编程方式打开抽屉:

将此变量创建为 state :

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

将其设置为 Scaffold 的键:

Scaffold(
      key: _scaffoldKey,

然后，您可以使用 key 状态打开抽屉:

_scaffoldKey.currentState.openDrawer();