如何在Flutter中在底部导航栏中添加抽屉？

Question

10 浏览2023年3月25日

匿名的 2023年3月25日

0 Comments

当用户点击第四个（more_vert）图标时，我想显示一个抽屉，但我无法实现。在我的当前实现中，当点击第四个图标时，Flutter会将我带到一个新页面，并在那里显示抽屉，而不是像应该的那样显示在当前屏幕上。我做错了什么？此外，BottomNavigationBar和BottomAppBar有什么区别？我无法找到任何区别。我查阅了一些文章，并且我认为BottomAppBar用于在底部应用栏中显示Fab浮动。除此之外，这两者还有什么区别，以及何时应该使用其中之一。

class Home extends StatefulWidget {


  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State {
  List _widgetOptions = [
    Page1(),
    Page2(),
    Page3(),
    Page4(),   // 这个页面实现了抽屉
  ];
  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(
             icon: Icon(AntDesign.carryout),
          ),
          BottomNavigationBarItem(
             icon: Icon(MaterialCommunityIcons.sack),
          ),
          BottomNavigationBarItem(
             icon: Icon(Octicons.archive),
          ),
          BottomNavigationBarItem(
             icon: Icon(Icons.more_vert),
          )
        ],
      ),
      // backgroundColor: Colors.black,
    );
  }
}

0

3 答案

匿名的 · Answer 1 · 2023-05-17T10:51:21+00:00

问题的原因是因为在使用较新版本的Flutter（2.0或更高版本）时，由于Null Safety的原因，会出现错误，提示无法无条件调用方法'openDrawer'，因为接收方可能为'null'。解决方法是使用条件式调用（'?.')或在目标上添加空值检查。使用_code<_drawerKey.currentState!.openDrawer();>可以解决这个问题。

匿名的 · Answer 2 · 2023-07-20T11:41:46+00:00

在Flutter中将抽屉添加到底部导航栏的问题是因为需要在底部导航栏中添加一个抽屉功能。解决方法是在根Scaffold中添加一个GlobalKey，并在Scaffold中实现抽屉功能。具体代码如下：

class Home extends StatefulWidget {


  _HomeState createState() => _HomeState();
}
class _HomeState extends State {
  List _widgetOptions = [
    Page(),
    Page(),
    Page(),
  ];
  int _currentSelected = 0;
  GlobalKey _drawerKey = GlobalKey();
  void _onItemTapped(int index) {
    index == 3
        ? _drawerKey.currentState.openDrawer()
        : setState(() {
            _currentSelected = index;
          });
  }
  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(
            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);
  Widget build(BuildContext context) {
    return Container();
  }
}

通过在Scaffold中添加一个全局键（GlobalKey）并在根Scaffold中实现抽屉（Drawer）的方式，可以在底部导航栏中添加一个抽屉功能。

匿名的 · Answer 3 · 2023-07-01T23:59:26+00:00

问题的原因是BottomNavigationBar不像AppBar一样显示抽屉图标。为了在底部导航栏中添加抽屉，可以按照以下步骤进行操作：

1. 创建一个用于保存状态的全局变量_scaffoldKey：

GlobalKey _scaffoldKey = GlobalKey();

2. 将_scaffoldKey设置为Scaffold的key：

Scaffold(


  key: _scaffoldKey,

3. 然后，可以使用_scaffoldKey.currentState.openDrawer()来打开抽屉：

_scaffoldKey.currentState.openDrawer();

通过以上步骤，可以在底部导航栏中添加抽屉。