如何通过点击 BottomNavigationBarItem 以编程方式打开抽屉？答案

【问题标题】：How to programmatically open a Drawer by tapping on a BottomNavigationBarItem?如何通过点击 BottomNavigationBarItem 以编程方式打开抽屉？
【发布时间】：2019-09-24 05:33:54
【问题描述】：

我正在制作一个颤振应用程序，我需要能够通过点击底部导航栏项来打开抽屉。有什么办法吗？

UX 设计师将抽屉菜单图标放在底部导航栏中的索引 0 处。我试图在 Flutter 文档中找到答案，但没有找到任何相关内容。我实际上找到了一种以编程方式打开它的方法（如下所示），但在我的情况下它并不像那样工作。

class _HomeState extends State<Home> {
  int _currentIndex = 1; // 0 = menu

  final List<Widget> _children = [
    PlaceholderWidget(Colors.deepPurple),
    PlaceholderWidget(Colors.white),
    DiagnosisWidget(),
    FindUsWidget(),
  ];

  _navItem(String text, IconData icon) {
    return BottomNavigationBarItem(
      /* Building Bottom nav item */
    );
  }

  void onTabTapped(int index) {
    setState(() {
      if(index == 0) {
        Scaffold.of(context).openDrawer(); // This is what I've tried
      }
      else {
        _currentIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: MyDrawer(),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed, // 4+ items in the bar
        items: [
          _navItem('MENU', Icons.menu),
          _navItem('HOME', Icons.home),
          _navItem('DIAGNOSIS', Icons.person),
          _navItem('FIND US', Icons.location_on),
        ],
      ),
    );
  }
}

我没有显示抽屉，而是收到以下错误消息：

使用不包含 Scaffold 的上下文调用 Scaffold.of()。

【问题讨论】：

标签： dart flutter

【解决方案1】：

这是因为在onTabTapped 中，您使用的上下文不包含您创建的 Scaffold。

您在 build 中实例化了 Scaffold，但在 onTabTapped 中，您正在当前上下文（_HomeState 上下文）中寻找父 Scaffold。

您可以在 Scaffold 内使用 Builder 来获取正确的上下文，或在您的 Scaffold 上使用 GlobalKey。

更多详情请见this answer。

编辑： 在您的情况下，GlobalKey 更容易实现。

您可以执行以下操作：

class _HomeState extends State<Home> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); // ADD THIS LINE
  int _currentIndex = 1; // 0 = menu

  final List<Widget> _children = [
    PlaceholderWidget(Colors.deepPurple),
    PlaceholderWidget(Colors.white),
    DiagnosisWidget(),
    FindUsWidget(),
  ];

  _navItem(String text, IconData icon) {
    return BottomNavigationBarItem(
      /* Building Bottom nav item */
    );
  }

  void onTabTapped(int index) {
    setState(() {
      if(index == 0) {
        _scaffoldKey.currentState.openDrawer(); // CHANGE THIS LINE
      }
      else {
        _currentIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey, // ADD THIS LINE
      drawer: Drawer(
        child: MyDrawer(),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed, // 4+ items in the bar
        items: [
          _navItem('MENU', Icons.menu),
          _navItem('HOME', Icons.home),
          _navItem('DIAGNOSIS', Icons.person),
          _navItem('FIND US', Icons.location_on),
        ],
      ),
    );
  }
}

【讨论】：