代号一——多个FAB及其定位

Question

根据 material 关于 FAB 设计的建议，我确实有一个实例需要 2 个 FAB 的单一形式。（好文章和好网站，如果你是新手：https://material.io/design/components/buttons-floating-action-button.html）

通过将 FAB 添加到内容窗格，它将被放置在分层窗格中，按照绑定调用期间指定的水平和垂直对齐方式：

fab1.bindFabToContainer(getContentPane(), Component.RIGHT, Component.BOTTOM);

但是现在，当我将第二个 FAB 添加到同一个右下角时，它们将从左到右并排显示。我希望可以选择将它们放在彼此之上，如在 google 地图中或在调用时出现 SUB Fab 项目。

我尝试过的事情：

应用单个 UIID 并使用边距约束为它们设置主题，从 FloatingActionButton 派生 UIID 的其余部分。我的 UIID 似乎完全被忽略了，因为按钮的位置取决于我的边距。
将第二个 FAB 添加到分层窗格的另一个位置，并仅在此 FAB 上使用边距（TOP 边距，基于它应该在的正确中心位置，将其放在第一个 FAB 的正上方）

fab2.bindFabToContainer(getContentPane(), Component.RIGHT, Component.CENTER);

然而，这并不仅仅将第二个 FAB 放在中心，而是将两个 FAB 都移动到这个位置。所以我又回到了我的边距应用不当的原始问题。

是否可以在单一形式中正确地单独定位多个 FAB，或者 CN1 是否执行严格的 "one-FAB-only" 政策，遵循 material 设计指南？

谢谢。

编辑解决方案：

使用正常的 "bindFabToContainer" 调用将第一个 FAB 添加到您的表单中。
对于第二个 FAB，使用分层窗格并在该分层窗格中手动添加和布局 FAB。以下代码将第二个 FAB 添加到第一个 FAB 的正上方，就像会出现一个子 FAB

解决方案：

fab2 = FloatingActionButton.createFAB(FontImage.MATERIAL_ATTACH_MONEY);
Container layer = getLayeredPane(getClass(), true);
FlowLayout flow = new FlowLayout(RIGHT);
flow.setValign(BOTTOM);
layer.setLayout(flow);
layer.add(fab2 );
fab2.getAllStyles().setMarginUnit(Style.UNIT_TYPE_DIPS);
fab2.getAllStyles().setMarginBottom(15);

Answer 1

material 设计指南包括子晶圆厂，而不是强烈反对的多个晶圆厂。您可能正在考虑快速拨号。您可以通过以下方式完成：

fab.createSubFab(otherFab1);
fab.createSubFab(otherFab2);
fab.createSubFab(otherFab3);

如果您仍想添加另一个 FAB，您可以通过手动将其添加到不同的层来实现：

Container layer = parentForm.getLayeredPane(getClass(), true);
FlowLayout flow = new FlowLayout(LEFT);
flow.setValign(BOTTOM);
layer.setLayout(flow);
layer.add(fab2);

这会将第二个晶圆厂放在左下角。您可以更改布局代码以将其放置在不同的位置。

代号一——多个FAB及其定位

Codename One - Multiple FABs and their positioning

position

codenameone

floating-action-button