SAPUI5 中的列表项响应问题答案

【问题标题】：List Item Responsive Issue in SAPUI5SAPUI5 中的列表项响应问题
【发布时间】：2017-06-12 06:42:20
【问题描述】：

我想做响应式列表项。如何并排设置列表项。它总是显示一个在另一个之下。这是我的代码；

    <l:Grid
defaultSpan="L6 M6 S12"
class="sapUiNoMargin sapUiNoContentPadding"
hSpacing="5"
vSpacing="5">
<l:content>
    <List>
        <items>
            <!--TodoItem-->
            <CustomListItem type="Active" press="handlePanel3" class="todoListItemContainer">
                <Panel class="todoListItem">
                    <!--Content-->
                </Panel>
            </CustomListItem>

            <!--PlanItem and ActivityItem-->
            <CustomListItem type="Active" press="handlePanel3" class="todoListItemContainer">
                <Panel class="todoListItem">
                    <!--Content-->
                </Panel>
            </CustomListItem>

        </items>
    </List>
</l:content>

这是输出图像；我怎样才能将这些物品并排放置。 Grid 的响应式布局属性是 L6 M6 S12 但它不起作用。我在哪里做错了？感谢您的建议。

【问题讨论】：

如果您有 2 个包含 1 个项目的列表，而不是 1 个包含 2 个项目的列表，它可能会起作用。在列表中，元素始终呈现在另一个之下。
这能回答你的问题吗？ Arrange list items in grid
见stackoverflow.com/a/54653559/5846045

标签： sapui5

【解决方案1】：

在列表中，网格布局将不适用，因为布局仅适用于直接子控件。您可以通过两种方式并排设置列表项

删除列表并将 CustomListItem 直接放在 Grid 控件中。

                <!--PlanItem and ActivityItem-->
                <CustomListItem type="Active" press="handlePanel3" class="todoListItemContainer">
                    <Panel class="todoListItem">
                        <!--Content-->
                    </Panel>
                </CustomListItem>

    </l:content>
</l:Grid>

在网格内使用 2 个列表（如 Marc 建议的那样）

<l:Grid
    defaultSpan="L6 M6 S12"
    class="sapUiNoMargin sapUiNoContentPadding"
    hSpacing="5"
    vSpacing="5">
    <l:content>
        <List>
            <items>
                <!--TodoItem-->
                <CustomListItem type="Active" press="handlePanel3" class="todoListItemContainer">
                    <Panel class="todoListItem">
                        <!--Content-->

                    </Panel>
                </CustomListItem>
            </items>
        </List>
        <List>
            <items>
                <!--PlanItem and ActivityItem-->
                <CustomListItem type="Active" press="handlePanel3" class="todoListItemContainer">
                    <Panel class="todoListItem">
                        <!--Content-->

                    </Panel>
                </CustomListItem>
            </items>
        </List>
    </l:content>
</l:Grid>

【讨论】：