Question

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

    <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，但它不起作用。我在哪里做错了？谢谢你的建议。

Answer 1

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

删除列表＆amp;将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>

在SAPUI5中列出项目响应问题

1 个答案: