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

Question

我正在尝试在此站点上实现下拉菜单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(),
                                  );

Answer 1

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