文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使这个视图中的布局更有响应性？

问如何使这个视图中的布局更有响应性？
EN

Stack Overflow用户
提问于 2019-11-12 17:27:15
回答 1查看 553关注 0票数 0

我正在开发一个UI5应用程序，我想知道如何改变视图，这样它就可以在Iphone上工作了。目前，应用程序只在Iphone模式下呈现一张卡，其余的卡被切断。我想让Iphone以垂直顺序和大屏幕(笔记本电脑，台式机)水平顺序加载卡片。我使用的是网格布局，我试图更改默认的跨度，但这没有起到任何作用。

这是我的密码

代码语言：javascript
复制
<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或小屏幕，卡片应该按垂直顺序加载，而在笔记本电脑或台式机这样的大屏幕上，卡片应该是水平的。

iphone
sapui5
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-13 06:56:18

根据您的代码，您对卡片使用了width和较大的边距，这不是必需的。另外，您已经使用了HBox，它将使卡片彼此对齐，而不是响应布局。网格将自己处理响应填充/裕度，并修改响应性的默认范围。

更新代码

代码语言：javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58823757

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档