如何使此视图中的布局更具响应性？

Question

我正在开发一个 UI5 应用程序，我想知道如何更改视图以使其在 Iphone 上运行。目前该应用程序仅在 Iphone 模式下呈现一张卡片，其余卡片被截断。我希望 Iphone 以垂直顺序加载卡片，并在大屏幕（笔记本电脑、台式机）上以水平顺序加载卡片。我正在使用网格布局，我尝试更改默认跨度但没有做任何事情。

这是我的代码

<mvc:View controllerName="ariba.cso.acwws.controller.WorkingWithSupport" xmlns:core="sap.ui.core" xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" xmlns:l="sap.ui.layout" xmlns:card="sap.f.cards"
    xmlns:csolib="ariba.cso.reuselibrary.controls">
    <f:DynamicPage id="dynamicpage">
        <f:title>
            <f:DynamicPageTitle>
                <f:heading>
                    <Title text="{i18n>pagetitle}"/>
                </f:heading>
            </f:DynamicPageTitle>
        </f:title>
        <f:content>
            <VBox>
                <l:Grid containerQuery="true" defaultSpan="S1">
                    <HBox>
                        <f:Card width="385px" class="sapUiLargeMargin">
                            <f:header>
                                <card:Header title="{i18n>highlight}"/>
                            </f:header>
                            <f:content>
                                <VBox>
                                    <Text text="{text>/body}" class="sapUiSmallMargin"/>
                                    <Link text="{text>/title}" press="hilightLink" class="sapUiTinyMargin"/>
                                </VBox>
                            </f:content>
                        </f:Card>
                        <f:Card width="340px" class="sapUiLargeMargin">
                            <f:header>
                                <card:Header title="{text>/csso}"/>
                            </f:header>
                            <f:content>
                                <VBox>
                                    <Link text="{text>/wgl}" press="whatgolivelink" class="sapUiTinyMargin"/>
                                    <Link text="{text>/ssi}" press="selfServiceLink" class="sapUiTinyMargin"/>
                                    <Link text="{text>/ssrp}" press="regPortalLink" class="sapUiTinyMargin"/>
                                    <Link text="{text>/acss}" press="overviewLink" class="sapUiTinyMargin"/>
                                    <Link text="{text>/sas}" press="sourcingLink" class="sapUiTinyMargin"/>
                                </VBox>
                            </f:content>
                        </f:Card>
                        <f:Card width="400px" class="sapUiLargeMargin">
                            <f:header>
                                <card:Header title="{i18n>services}"/>
                            </f:header>
                            <f:content>
                                <VBox>
                                    <Label text="{i18n>cloudsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{i18n>cloudsupportpolicylink}" press="cloudLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>onpremisesupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{text>/teops}" press="onPremiseLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>previoussupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{text>/ces}" press="prevSuppLinkA" class="sapUiTinyMargin" wrapping="true"/>
                                    <Link text="{text>/tes}" press="prevSuppLinkB" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>premiumsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{text>/ecsd}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Link text="{i18n>premiumsupportpolicylink}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>agreements}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{i18n>agreementslink}" press="agreementLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>lifecycle}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{text>/plc}" press="lifeCycleLink" class="sapUiTinyMargin" wrapping="true"/>
                                    <Label text="{i18n>programs}" design="Bold" class="sapUiTinyMargin"/>
                                    <Link text="{text>/psn}" press="programLinkA" class="sapUiTinyMargin" wrapping="true"/>
                                    <Link text="{text>/tcss}" press="programLinkB" class="sapUiTinyMargin" wrapping="true"/>
                                </VBox>
                            </f:content>
                        </f:Card>
                    </HBox>
                </l:Grid>
                <csolib:ACFooter/>
            </VBox>
        </f:content>
    </f:DynamicPage>
</mvc:View>

预期结果是 iphone 或小屏幕卡片应按垂直顺序加载，而在笔记本电脑或台式机等大屏幕上卡片应水平放置。

Answer 1

根据您的代码，您使用了 width 和较大的卡片边距，这不是必需的。您还使用了 HBox ，它将卡片彼此对齐，而不是响应式布局。 Grid 将自行处理响应 padding/margin 并修改响应的默认跨度。

更新代码

<f:DynamicPage id="dynamicpage">
    <f:title>
        <f:DynamicPageTitle>
            <f:heading>
                <Title text="{i18n>pagetitle}"/>
            </f:heading>
        </f:DynamicPageTitle>
    </f:title>
    <f:content>
        <VBox>
            <l:Grid containerQuery="true" defaultSpan="XL2 L4" class="sapUiTinyMargin">                 
                <f:Card>
                    <f:header>
                        <card:Header title="{i18n>highlight}"/>
                    </f:header>
                    <f:content>
                        <VBox>
                            <Text text="{text>/body}" class="sapUiSmallMargin"/>
                            <Link text="{text>/title}" press="hilightLink" class="sapUiTinyMargin"/>
                        </VBox>
                    </f:content>
                </f:Card>
                <f:Card>
                    <f:header>
                        <card:Header title="{text>/csso}"/>
                    </f:header>
                    <f:content>
                        <VBox>
                            <Link text="{text>/wgl}" press="whatgolivelink" class="sapUiTinyMargin"/>
                            <Link text="{text>/ssi}" press="selfServiceLink" class="sapUiTinyMargin"/>
                            <Link text="{text>/ssrp}" press="regPortalLink" class="sapUiTinyMargin"/>
                            <Link text="{text>/acss}" press="overviewLink" class="sapUiTinyMargin"/>
                            <Link text="{text>/sas}" press="sourcingLink" class="sapUiTinyMargin"/>
                        </VBox>
                    </f:content>
                </f:Card>
                <f:Card>
                    <f:header>
                        <card:Header title="{i18n>services}"/>
                    </f:header>
                    <f:content>
                        <VBox>
                            <Label text="{i18n>cloudsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{i18n>cloudsupportpolicylink}" press="cloudLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>onpremisesupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{text>/teops}" press="onPremiseLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>previoussupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{text>/ces}" press="prevSuppLinkA" class="sapUiTinyMargin" wrapping="true"/>
                            <Link text="{text>/tes}" press="prevSuppLinkB" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>premiumsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{text>/ecsd}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Link text="{i18n>premiumsupportpolicylink}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>agreements}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{i18n>agreementslink}" press="agreementLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>lifecycle}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{text>/plc}" press="lifeCycleLink" class="sapUiTinyMargin" wrapping="true"/>
                            <Label text="{i18n>programs}" design="Bold" class="sapUiTinyMargin"/>
                            <Link text="{text>/psn}" press="programLinkA" class="sapUiTinyMargin" wrapping="true"/>
                            <Link text="{text>/tcss}" press="programLinkB" class="sapUiTinyMargin" wrapping="true"/>
                        </VBox>
                    </f:content>
                </f:Card>                   
            </l:Grid>
            <!-- <csolib:ACFooter/> -->
       </VBox>
    </f:content>
</f:DynamicPage>

如何使此视图中的布局更具响应性？

How do I make the layouts in this view more responsive?

iphone

sapui5