Question

我想要做的是在带有列的网格中排列列表项（来自绑定）。这是我的代码：

<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

我想您需要的是sap.m.Table而不是网格，也不是列表

Answer 2

UI5 1.60 引入了一个名为sap.f.GridList ^API的新控件，该控件结合了sap.m.ListBase（例如growing ），并能够以网格布局显示列表项（内部为CSS中的display: grid。

<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}

注意：：GridList具有以下库依赖项。.

sap.f
sap.ui.layout

请确保事先以异步方式并行加载它们，例如在引导程序配置中：

<script id="sap-ui-bootstrap" src="..."
  data-sap-ui-libs="sap.ui.core, sap.m, sap.f, sap.ui.layout"
  data-sap-ui-async="true"
  ...
></script>

在网格中排列列表项

2 个答案: