实现固定大小的虚拟用户界面卡

Question

我正在尝试实现一个虚拟UI ID卡，它看起来就像所有设备上的一张卡片。我需要4行总数和3列。我也希望宽度大约是身高的两倍(2:1比)。

1)我考虑了边界布局。但它似乎跨越了整个屏幕的大小。很快，我的卡宽大小就像身高的5倍。所以这在视觉上行不通。我怀疑Gridlayout也会受到类似问题的影响。 2)我使用了表格布局(4X3)。我试着使用填充/边距，在平板电脑上，界面的外观和感觉似乎很快就不成比例了，而在手机上看上去却很不错，因为手机的宽度似乎与卡片的宽度很相似。 3)我尝试将widthPercentage指定为表UI上的约束。同样，这种做法也受到类似问题的困扰。因为在较小的手机上，我将不得不删除添加小百分比利润率，但在大平板电脑上，我可能需要更大的利润率。这可能会很快变得具有挑战性，以获得正确的/测试。

我现在正考虑采取以下办法之一：

1)我不确定是否有一种方法可以根据字符数来指定TextField宽度。例如，当卡片发行日期在平板电脑上增长时，它可以容纳10s字符，我希望它只适合moht(mm)和4个字符(Yyyy)。有办法吗？ 2)我能告诉屏幕的宽度(以英寸或毫米为单位)吗？我可以实现一个函数来尝试和缩放不同屏幕大小的填充/边距。

我很感谢你的反馈。

Answer 1

看厨房水槽的演示，其中有默认的“卡”模式在开始。它使用特殊情况下的网格布局，以适合平板电脑/桌面的合理方式。

https://www.codenameone.com/demos-KitchenSink.html