文本和图标的垂直对齐

Vertical alignment of text and icon

今天我花了两个小时试图垂直对齐按钮图标底部的 toogle 按钮的文本。

按钮图标高度是文本高度的三到四倍:文本必须在图标底部垂直对齐。

如果参数为 Component.TOP 或 Component.CENTER,方法 setVerticalAlignment(int valign) 将按预期工作,但 Component.BOTTOM 的行为与 Component.CENTER 完全相同。

我尝试了很多解决方法,但都没有成功。奇怪的是,一项如此简单的任务却很难做到:我是不是错过了什么?谢谢。

我不知道它是否相关,但我也在使用 setTextPosition(Component.RIGHT)。

已编辑答案...

该代码使用起来有点困难,并且有很多细微差别和不当行为。我通常最终只是将文本和图标拆分为单独的标签并使用类似流布局的东西:

Form hi = new Form("Big and Small", BoxLayout.y());

CheckBox toggle = CheckBox.createToggle("My Text");
toggle.setUIID("Label");
Label bigIcon = new Label("");
FontImage.setMaterialIcon(bigIcon, FontImage.MATERIAL_INFO, 10);

Container lead = FlowLayout.encloseBottomInRow(toggle, bigIcon);
lead.setUIID("ToggleButton");
lead.setLeadComponent(toggle);
hi.add(lead);

hi.show();

请注意,此时此代码需要昨天添加到代码中的更改(ByRow 方法)。最初我认为这是 FlowLayout 中的一个错误,但它似乎只是计算容器垂直对齐的两种不同方法。

要了解为什么对齐和放置标签如此困难,请查看相关代码:https://github.com/codenameone/CodenameOne/blob/fd2acfc10eb22f4b7a3089aeac4e967280f92b4e/CodenameOne/src/com/codename1/ui/plaf/DefaultLookAndFeel.java#L1314-L1623

这只是通用代码。在本机 iOS 和 Android 代码中有它的副本(为了性能)。