单击底部导航栏时关闭 Flutter 抽屉

Posted 2023-04-13

【中文标题】单击底部导航栏时关闭 Flutter 抽屉

【英文标题】：Close Flutter drawer when bottom navigation bar is click

【发布时间】：2020-07-28 20:22:02

【问题描述】：

我有底部导航栏和抽屉。我希望抽屉在用户单击任何按钮导航图标时自动关闭。我不确定该怎么做。

当用户点击抽屉内部时，我可以立即关闭抽屉，如下所示

    void _onSelectItem(int index) 
    setState(() => _currentSelected= index);
    Navigator.of(context).pop(); // close the drawer
  

但抽屉永远卡在那里，直到我滑回去。我还希望抽屉在用户单击底部导航栏时立即关闭。

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

    );
  

这是我的底部导航栏

        bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blueGrey[900],

        type: BottomNavigationBarType.fixed,
        onTap: onTappedBar,
        currentIndex: _currentSelected,
        showUnselectedLabels: true,
        unselectedItemColor: Colors.white,
        selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
        items: <BottomNavigationBarItem> [ 
          BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text('Home')),
          BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')),
          BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')),
          BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')),

        ],

      ),

我目前正在学习 Flutter，因此非常感谢任何建议。谢谢

【参考方案1】：

将onTap: (int index) 添加到底部导航栏脚手架，并在该方法中添加Navigator.of(context).pop();。希望这可以帮助。

【讨论】：

您好，谢谢您，但我遇到了一个错误。我在 BottomNavigationBar 添加了代码，但出现此错误“未定义名称参数 onItemSelected”

对不起，您需要使用 onTap: (int index) 。 onItemSelected 用于不同的小部件，我已经更新了我的原始答案