悬停时显示/隐藏下拉菜单 Flutter for web

Posted 2023-02-23

【中文标题】悬停时显示/隐藏下拉菜单 Flutter for web

【英文标题】：Show/Hide Drop down menu on hover Flutter for web

【发布时间】：2021-09-19 02:08:37

【问题描述】：

我正在尝试在此站点上实现下拉菜单https://www.mapbox.com/mapbox-gljs

屏幕截图：我想要什么？

到目前为止，我使用PopupMenuButton 来显示下拉菜单。但我无法弄清楚：

如何更改PopupMenuButton 下拉列表的布局 如何在鼠标悬停时显示/隐藏。我尝试过使用onHover 的InkWell 和MouseRegion，但是一旦鼠标不在按钮上方，它就不会隐藏菜单。

截图：我站在哪里

代码

IDK why this code was not being copied in format way :(

                                  return PopupMenuButton(
                                    offset: Offset(0, 60),
                                    elevation: 4.0,
                                    child: Container(
                                      decoration: BoxDecoration(
                                        border:
                                            tabBarProviders.currentIndex == i
                                                ? Border(
                                                    bottom: BorderSide(
                                                      width: 3.0,
                                                      color: kRedPrimaryColor,
                                                    ),
                                                  )
                                                : Border(),
                                      ),
                                      padding: const EdgeInsets.all(8.0),
                                      child: Row(
                                        children: [
                                          Text(
                                            _actionBtns[i],
                                            style: TextStyle(
                                                fontWeight: FontWeight.bold),
                                          ),
                                          Icon(Icons.arrow_drop_down),
                                        ],
                                      ),
                                    ),
                                    onSelected: (value) 
                                      if (value == "WATERPROOFING") 
                                        tabBarProviders.currentIndex = 3;
                                      
                                    ,
                                    itemBuilder: (context) =>
                                        _waterProofingDropDown
                                            .map((e) => PopupMenuItem(
                                                value: e, child: Text(e)))
                                            .toList(),
                                  );

【参考方案1】：

我建议您使用flutter portal package，它将在您的用例中帮助您很多

【讨论】：

我看了看，问题不是在悬停上显示它我面临的问题是，一旦鼠标不再悬停按钮，我将如何隐藏菜单

要检测鼠标，有一个小部件MouseRegionapi.flutter.dev/flutter/widgets/MouseRegion-class.html

正如问题中提到的，我已经使用过它。我知道它的 onHover 。但是如何隐藏菜单