有什么想法来改进这个UI架构？

Question

我正在使用SAPUI5开发类似下面的UI：

首先，我考虑过像这样构建XML视图：

Priority

但是，我有点困惑，因为我在台式机和平板电脑上查看输入字段时需要输入字段的标签（就像上图中一样），但是它们必须叠加在每个上面在较小的（智能手机）视口中查看页面时的其他内容：

是否有人建议构建此视图或使其具有响应性的想法？提前谢谢！

Answer 1

您要搜索的是“网格”布局。 https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.ui.layout.Grid/samples

您可以设置“defaultSpan”属性，该属性是一种字符串类型，表示整个网格的大，中，小屏幕的Grid默认跨度值。允许值由空格L，M或S分隔，后跟容器必须采用的从1到12的列数，例如：“L2 M4 S6”，“M12”，“s10”或“l4 m4”。注意，必须以大中小的顺序提供参数。默认值为L3 M6 S12。

在您的情况下，例如“L1 M2 S4”。

检查tile based layout，因为您可以从中学到最多。

当然不要忘记查看Grid's API。