Flutter中如何捕获BottomNavigationBarItem的双击事件？

当然可以实现单个BottomNavigationBarItem的双击事件，你遇到的问题是因为InkWell会拦截点击事件，导致BottomNavigationBar本身的onTap回调无法触发。解决思路是在InkWell中手动处理单击逻辑，同时保留双击回调，这样就能兼顾两种事件。

解决方法 #

给每个需要双击的BottomNavigationBarItem的icon包裹InkWell，同时在InkWell的onTap中手动调用原有的单击处理函数，并传入对应item的索引；onDoubleTap中处理该item的双击逻辑。

示例代码如下：

return Scaffold(
  body: viewService.buildComponent("homelist"),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: InkWell(
          onDoubleTap: () {
            _onItemDoubleTapped(0); // 首页item的双击逻辑
          },
          onTap: () {
            _onItemTapped(0); // 手动触发首页的单击逻辑
          },
          child: Icon(Icons.home),
        ),
        label: AppLocalizations.of(context)!.cruiseNavigatorHome,
      ),
      BottomNavigationBarItem(
        icon: InkWell(
          onDoubleTap: () {
            // 订阅页item的双击逻辑
            final SubListDefaultController subListDefaultController = Get.put(SubListDefaultController());
            subListDefaultController.isScrollTop = true;
          },
          onTap: () {
            _onItemTapped(1); // 手动触发订阅页的单击逻辑
          },
          child: Icon(Icons.subscriptions),
        ),
        label: AppLocalizations.of(context)!.cruiseNavigatorSubscribe,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.rss_feed),
        label: AppLocalizations.of(context)!.cruiseNavigatorChannel,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: AppLocalizations.of(context)!.cruiseNavigatorMine,
      ),
    ],
    currentIndex: state.selectIndex,
    fixedColor: Theme.of(context).primaryColor,
    onTap: _onItemTapped,
    unselectedItemColor: Color(0xff666666),
    type: BottomNavigationBarType.fixed,
  ),
);

原理说明 #

BottomNavigationBar的单击事件由内部的手势识别器处理，当你用InkWell包裹图标时，InkWell会优先捕获点击事件并消耗掉，导致底层的BottomNavigationBar无法收到单击事件。通过在InkWell的onTap中手动调用原有的_onItemTapped函数，就能把单击逻辑衔接起来，同时onDoubleTap可以独立处理双击行为，两者互不干扰。

内容的提问来源于stack exchange，提问作者Dolphin