iphone - 如何使此视图中的布局更具响应性?
问题描述
我正在开发一个 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 或小屏幕上的卡片应该以垂直顺序加载,而在笔记本电脑或台式机等大屏幕上,卡片应该是水平的。
解决方案
根据您使用的代码width
和卡的大量边距,这不是必需的。您还使用HBox
了将卡片彼此对齐而不是响应式布局。Grid 将自行处理响应式填充/边距,并且还修改了响应性的默认跨度。
更新代码
<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>
推荐阅读
- android - Firemonkey TMemo OnChangeTracking Android 上的奇怪行为
- python - 根据容器中的元素获取副标题文本
- flutter - 多供应商颤振
- testng - 如果测试失败,带有 dataProvider 的 TestNG 会跳过测试
- swift - Firebase 规则:权限被拒绝
- angular - 为 Angular Material 步进器中的一步分配全宽
- javascript - JavaScript 循环嵌套数组
- git - 如何以特定格式转换 git log --name-only?
- python - 三变量相关性分析:将一个变量分类为区间,以实现其他两个变量之间更好的相关性
- c# - HttpClientFactory(System.Net.Http.Formatting)的目的是什么?