sapui5 - 在网格中排列列表项

Question

我想要做的是将列表项(来自绑定(bind))排列在带有列的网格中。这是我的代码:

<l:Grid
  defaultSpan="L3 M4 S6"
  class="sapUiSmallMarginTop"
>
  <m:List
    mode="None"
    items="{tickets>children}"
  >
    <m:CustomListItem>
      <m:HBox>
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-green" 
          visible="{= ${tickets>status} === 'resolved'}"
          tooltip="{i18n>ticket.status.resolved}"
        />
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-red"
          visible="{= ${tickets>status} === 'open'}"
          tooltip="{i18n>ticket.status.open}"
        />
        <m:VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
          <m:Link
            text="#{tickets>referenceNumber}"
            target="{tickets>id}"
            press="handleChildRecordPress"
          />
          <m:Label text="{
            path: 'tickets>unitID',
            formatter: '.formatUnit'
          }"/>
        </m:VBox>
      </m:HBox>
      <m:layoutData>
        <l:GridData span="L12 M12 S12" />
      </m:layoutData>
    </m:CustomListItem>
  </m:List>
</l:Grid>

但它每行只显示一个项目，而不是多个。如何连续显示多个项目？

这就是现在的样子，我想要的是连续显示 3 或 4 个项目(响应式就很好)

Answer 1

UI5 1.60 引入了一个名为 sap.f.GridList ^{API 的新控件} 结合了 sap.m.ListBase 的功能(例如 growing)以及在网格布局中显示列表项的能力(display: grid 在 CSS 内部)。

<f:GridList xmlns:f="sap.f"
  class="sapUxAPObjectPageSubSectionAlignContent"
  items="..."
>
  <f:customLayout>
    <cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxesPerRowConfig="XL7 L4 M3 S1" />
  </f:customLayout>
  <f:items>
    <!-- m.CustomListItem, m.StandardListItem, etc.. -->
  </f:items>
</f:GridList>

自定义布局GridBoxLayout ^API 允许以响应方式显示网格项，可以通过 boxPerRowConfig 和 boxMinWidth 属性进行配置。

^{来源:https://ui5.sap.com/#/sample/sap.f.sample.GridListBoxContainer/preview}

---

注意: sap.f.GridList 目前依赖于 sap.m、sap.f、和sap.ui.layout。将它们添加到依赖项列表中，例如在应用程序描述符中，以便这些库可以与其他依赖库异步并行加载:

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.ui.core": {},
      "sap.m": {},
      "sap.f": {},
      "sap.ui.layout": {}
    }
  }
}