UI5中包含五个单元格的网格

Question

有没有一种方法可以使用sap.ui.layout.Grid获得每行5个单元格。

当span为2时，我可以得到6个细胞，当span为3时，我可以得到4个细胞，当span为4时，我可以得到3个细胞。

但似乎无法使用此控件获取5个单元格行。有什么想法？

Answer 1

默认情况下，网格的作用是用12列分隔屏幕。跨度表示要分割的每个部分的大小。在跨度为2的示例中，结果是6个单元格，因为12/2 =6。

因为您不能为跨度指定小数大小，所以您可以做的就是使用缩进。如果您选择跨度为2，但在第一个元素1上使用缩进，则只会出现5列，因为您没有足够的空间来容纳第六个元素(1 +2 +2+2+2+2= 11 ->，因此没有空间容纳+2列)。一个简单的例子可以让你看到这一点，如下所示：

<mvc:View
       xmlns:mvc="sap.ui.core.mvc"
       xmlns:l="sap.ui.layout"
       xmlns="sap.ui.commons"
       controllerName="sap.ui.layout.sample.GridProperties.GridProperties"
       xmlns:html="http://www.w3.org/1999/xhtml">
<l:VerticalLayout
            width="100%">
<l:Grid defaultSpan="XL2 L2 M5 S12" position="Center">
<l:content>
  <Label text="Text">
   <layoutData>
      <l:GridData span="XL2 L2" indent="XL1" />
    </layoutData>
  </Label>
    <Label text="Text">
    <layoutData>
      <l:GridData span="XL2 L2"/>
    </layoutData>
  </Label>
    <Label text="Text">
    <layoutData>
      <l:GridData span="XL2 L1" />
    </layoutData>
  </Label>
    <Label text="Text">
    <layoutData>
      <l:GridData span="XL2 L2" />
    </layoutData>
  </Label>
  <Label text="Text">
    <layoutData>
      <l:GridData span="XL2 L2" />
    </layoutData>
  </Label>
  <Label text="Text">
    <layoutData>
      <l:GridData span="XL2 L2" />
    </layoutData>
  </Label>
</l:content>
</l:Grid>
</l:VerticalLayout>
</mvc:View>

如果取消第一个标签的缩进，您将在同一行中看到6个标签，否则只会显示5个标签。

希望这能有所帮助！