gluon mobile：菜单中的菜单闪烁

Question

stackoverflow的Hello社区...

我已经将多个（JavaFX）菜单实例放入一个菜单（位于GluonMobile-View的子节点中）：

问题是，当滑鼠将鼠标悬停在其中之一时，子菜单会闪烁并相互重叠：

所以我的问题是，如果有人知道我的问题的解决方案。 （该视图是使用SceneBuilder构建的）

Answer 1

对于初学者来说，经典桌面菜单并不是真正打算在移动应用程序中使用。

您应考虑使用不同的方法，例如NavigationDrawer（javadoc）或BottomNavigation控件（javadoc）。

无论如何，如果您确实需要使用它们，则以下是您所面临的问题的说明：

在Scene Builder上，添加MenuBar时，默认情况下它包括一些Menu和MenuItem控件。如果启用Gluon Mobile主题：

您会注意到Menu的填充很小，而MenuItem的填充更大，并且高度和宽度已设置为最小。

如果您将Menu添加为另一个Menu的子级，则如果未选择此菜单或未对其进行聚焦，则其样式类似于MenuItem，但是如果聚焦于此，它将样式为Menu，强制重新布局。

例如，在此图片中，顶部的Edit是选择菜单，而底部的Edit没有被选择。

在布局之后，如果鼠标光标足够靠近下一个项目，则可能现在正在选择它，它将展开它。同时，先前选择的菜单将被取消选择，并且将再次增长...

这是解决问题的一种简便方法：在视图的css文件中，添加以下内容：

.menu,
.menu:focused,
.menu-item {
    -fx-padding: 10;
}

所以菜单和菜单项在所有情况下都具有相同的填充，以防止任何可能的闪烁。

请注意，使用CSS可以覆盖以前的任何现有样式，并根据自己的喜好对其进行修改。