[英]gluon mobile: menus in menu are flickering
Hello community of stackoverflow ... 您好stackoverflow社区...
I've put multiple (JavaFX) Menu -instances into one Menu (which is in a subnode of a GluonMobile-View): 我已经将多个(JavaFX)Menu -instances放入一个Menu(位于GluonMobile-View的子节点中):
The problem is, that the submenus are flickering and overlapping each other when the courser hovers one of them: 问题是,当滑鼠将鼠标悬停在其中时,子菜单会闪烁并相互重叠:
So my question is, if someone knows a solution for my problem. 所以我的问题是,是否有人知道我的问题的解决方案。 (The view was build with SceneBuilder)
(该视图是使用SceneBuilder构建的)
For starters, classic desktop menus are not really intended to be used in mobile applications. 首先,经典桌面菜单并不是真正打算在移动应用程序中使用。
You should consider different approaches, like the NavigationDrawer
( javadoc ), or the BottomNavigation
control ( javadoc ). 您应该考虑其他方法,例如
NavigationDrawer
( javadoc )或BottomNavigation
控件( javadoc )。
Anyway, if you really need to use them, here is an explanation of the issue you are facing: 无论如何,如果您确实需要使用它们,以下是对您面临的问题的说明:
On Scene Builder, when you add MenuBar
, it includes by default some Menu
and MenuItem
controls. 在Scene Builder上,当您添加
MenuBar
,它默认包含一些Menu
和MenuItem
控件。 If you enable the Gluon Mobile theme: 如果启用Gluon Mobile主题:
you will notice that the padding on the Menu
is minimal, while the MenuItem
has bigger padding and a minimum height and width have been set. 您会注意到
Menu
上的填充最小,而MenuItem
填充较大,并且高度和宽度已设置为最小。
If you add a Menu
as child of another Menu
, if this menu is not selected or focused, it is styled like a MenuItem
, but if you focus it, it will be styled as a Menu
, forcing a relayout. 如果将
Menu
添加为另一个Menu
子Menu
,则如果未选择此菜单或未选中该菜单,则其样式将类似于MenuItem
,但是如果将其聚焦,则将其样式化为Menu
,从而强制重新布局。
For instance, in this pic, Edit
on top is the select menu, while Edit
on bottom is not selected. 例如,在此PIC,
Edit
在顶部是选择菜单,而Edit
不选择在底部。
Right after the layout, if the mouse cursor was close enough to the next item, it is possible that now is selecting it, which will expand it. 在布局之后,如果鼠标光标足够靠近下一个项目,则可能现在正在选择它,它将对其进行扩展。 At the same time the former selected menu will become deselected, and it will grow again...
同时,先前选择的菜单将被取消选择,并且将再次增长...
Here is an easy way to solve the issue: In your css file for the view, add something like: 这是解决问题的一种简单方法:在视图的css文件中,添加类似以下内容:
.menu,
.menu:focused,
.menu-item {
-fx-padding: 10;
}
so both menus and menu-items have same padding in all cases, preventing any possible flickering. 因此菜单和菜单项在所有情况下都具有相同的填充,以防止任何可能的闪烁。
Note that with css you can override any previous existing styling and modify it to your liking. 请注意,使用css可以覆盖以前的任何现有样式,并根据自己的喜好对其进行修改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.