gluon mobile:菜单中的菜单闪烁

Question

你好，stackoverflow社区...

我已经将多个(JavaFX)菜单视图放入一个菜单(位于GluonMobile- -instances的子节点中)：

​

​

问题是，当用户悬停其中一个子菜单时，子菜单会闪烁并相互重叠：

​

​

​

​

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

Answer 1

对于初学者来说，传统的桌面菜单并不是真正打算用于移动应用程序。

您应该考虑不同的方法，如NavigationDrawer (javadoc)或BottomNavigation控件(javadoc)。

无论如何，如果你真的需要使用它们，这里是对你面临的问题的解释：

在场景生成器中，添加MenuBar时，默认情况下会包含一些Menu和MenuItem控件。如果启用Gluon Mobile主题：

​

​

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

如果您添加一个Menu作为另一个Menu的子项，如果此菜单未被选中或聚焦，它的样式将类似于MenuItem，但如果您聚焦它，它将被样式化为Menu，从而强制重新布局。

例如，在这张图片中，顶部的Edit是选择菜单，而底部的Edit未被选中。

​

​

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

这里有一个解决问题的简单方法:在视图的css文件中，添加如下内容：

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

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

​

​

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