代号一如何在图标顶部添加一个凸起并将它们放置在工具栏中

Question

这是我试过的

notification = Command.create("", materialIcon(FontImage.MATERIAL_NOTIFICATIONS, 3, 0xffffff), evt -> {
       ////....
    });
    mainForm.getToolbar().addCommandToRightBar(notification);

我想实现下面这个

Answer 1

标记任意按钮非常简单：https://www.codenameone.com/blog/badging-arbitrary-components.html

Button chat = new Button("");
FontImage.setMaterialIcon(chat, FontImage.MATERIAL_CHAT, 7);

FloatingActionButton badge = FloatingActionButton.createBadge("33");
hi.add(badge.bindFabToContainer(chat, Component.RIGHT, Component.TOP));

虽然工具栏按钮是封装的，但不应加标记。

要解决这个问题，请不要向标题区域添加命令。而是通过添加您自己的标题标签和按您喜欢的方式设计的带徽章按钮来创建一个完全自定义的标题区域。您可以通过使用 setTitleComponent 而不是 setTitle 并避免对这些按钮使用 add*Command 方法来做到这一点。

Answer 2

这就是我如何将图标放置在工具栏中的方法

Button notifiations = new Button("");
    notifiations.setIcon(materialIcon(FontImage.MATERIAL_NOTIFICATIONS, 3, ColorUtil.WHITE));

    FloatingActionButton badge = FloatingActionButton.createBadge("2");
    badge.setUIID("Notification-Badge");
Container notiCnt = BoxLayout.encloseX(badge.bindFabToContainer(notifiations, Component.RIGHT, Component.TOP));

mainForm.getToolbar().add(BorderLayout.EAST, FlowLayout.encloseRightMiddle( notiCnt));

代号一如何在图标顶部添加一个凸起并将它们放置在工具栏中

Codenmae one how to make add a budge on top of an icon and place them in the toolbar

toolbar

codenameone