UI5响应式布局控件（创建响应式CustomListItem）

Question

我在 XML 视图中构建了一个 CustomListItems 列表：

<!-- List with CustomListItem (seperate Icon for event) -->     
        <List  class="cTL" id="test-list2" type="Active" headerText="CustomListItems with Icon Control" items="{path : '/products'}">
            <CustomListItem title="boom" counter="3" class="cTL-item" tabindex="1">
                <content>
                    <core:Icon tabindex="2" decorative="false"
                    color="{
                     path: 'price',
                     formatter:'.setPrioColor'
                     }"
                     src="sap-icon://add"></core:Icon>
                    <layout:VerticalLayout class="cTL-text">
                        <layout:content>
                            <Label color="#333333" class="cTL-text-title" text="Orange"></Label>
                            <Text maxLines="1" wrapping="true" class="cTL-text-desc" text="Spain this is a long long long text lalalala onetwothree einzweidreivier Spain this is a long long long text lalalala onetwothree einzweidreivier"></Text>
                        </layout:content>
                    </layout:VerticalLayout>
                </content>
            </CustomListItem>
        </List>

并且我添加了一些自定义 css，因此它看起来就像一个 StandardListItem:

.cTL .cTL-item.sapMLIB {
                    padding: 0 1rem 0 1rem;
                }
                .cTL .sapUiIcon {
                    font-size: 1.375rem;
                    vertical-align: 80%;
                }
                .cTL .cTL-text {
                    margin: 1rem 0.5rem 0.5rem 1rem;
                }
                .cTL .cTL-text .cTL-text-title.sapMLabel {
                    font-size: 1rem;
                    color: #333333;
                }
                .cTL .cTL-text-desc {
                    color: #666666;
                }

因此，如果浏览器 window 全屏，它工作正常，但是：在屏幕截图上，您可以看到上面带有 StandardlistItems 的列表和下面的 CustomListItems。 .. 他们没有回应！您会推荐哪个布局元素使其表现得像 Standardlistitem（缩短文本和响应式对齐方式）？

Answer 1

我会将内容包装在 HBox 中，图标和附加布局（我更喜欢 VBox 而不是 VerticalLayout）在它们自己的, 居中 VBox:

（删除了除重要属性之外的所有属性）：

<List>
    <CustomListItem>
        <content>
            <HBox justifyContent="Start" fitContainer="true">
                <VBox justifyContent="Center">
                    <core:Icon />
                </VBox>
                <VBox justifyContent="Center">
                    <Label />
                    <Text />
                </VBox>
            </HBox>
        </content>
    </CustomListItem>
</List>

Answer 2

在我们的团队中，我们将 VBox 和 HBox 替换为 sap.ui.layout.Grid 控件。这将使您的布局能够响应并在 IE9 中工作。

https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.ui.layout.sample.GridInfo/preview

UI5响应式布局控件（创建响应式CustomListItem）

UI5 responsive layout controls (create responsive CustomListItem)

css

responsive-design

sapui5