SAP UI5 应用 FlexBox 控件 growFactor 的使用方法
使用 Flex Box Layout 布局方式,开发人员可以让浏览器处理元素的分布。 这确保应用的元素始终填充沿主轴的可用空间。 为了达到这个目的,需要为 Flex Item 设置一个弹性系数(flexibility factor
)。
控制 flexibility factor 的具体属性称为 growFactor
。它通过 layoutData
聚合上的 FlexItemData
设置在弹性项目对象上。
下图是一个例子:
弹性布局算法决定弹性项目的 natural
宽度。 如果还有剩余空间,这个空间会根据它们的相对增长因子(growFactor
)分配给弹性项目。
例如,如果一个 horizonzal flex 容器是 300px 宽,并且包含两个 100px 的元素,那么将剩余 100px 的额外宽度。
如果两个 flex 项目的 growFactor 都设置为 1,则两者都会额外增加 50px,也就是二者平分这剩余的 100 px 额外宽度,从而使它们的宽度为 150px。 如果一个项目的 growFactor 设置为 3,另一个项目设置为 1,则第一个项目获得额外的 75px(100px 的 ¾)剩余空间,第二个项目获得 25px(100px 的 ¼)。
如果 growFactor 设置为其默认值 0,则该 item 不被视为 Flex Item,并且两个项目都将保持其 100px 的宽度。
要根据 growFactor 实现比例宽度,请通过 CSS 将所有项目的宽度设置为 0。 所有项目的“自然”宽度之和也为 0。但是,剩余空间现在等于 FlexBox 的全部空间。 然后根据 growFactor 分配这个空间。 对于上面 growFactor 设置为 3 和 1 的示例,通过 CSS 将 flex 项目的宽度设置为 0 导致第一个项目的宽度为 225px(300 像素的 ¾),第二个项目的宽度为 75px(300 像素的 ¼)。
一旦为任何项目设置了 growFactor,弹性布局算法就会忽略 FlexBox 的 justifyContent 属性,因为项目无论如何都会占用所有可用空间。 不同的值之间不会有区别。
相关文章
- [SAA + SAP] 02. Security
- 通过一个具体的例子,深入了解 SAP UI5 控件数据双向绑定的工作原理和问题排查方法试读版
- 在 SAP ABAP Gateway 系统上定义后台系统的 Alias
- SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
- SAP UI5 navpopover Factory 的使用方法介绍
- SAP UI5 应用中 MockServer 的实例化方法
- SAP UI5 应用开发教程之五十八 - 使用工厂方法在运行时动态创建不同类型的列表行项目控件试读版
- SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
- 各种 SAP 产品的自定义 UI 创建和集成方法一览
- SAP UI5 Web Component React应用如何在Component之间跳转
- SAP CRM和SAP Hybris的action profile
- SAP UI5里xml fragment getContent方法的实现
- UI5应用clone到webIDE后,如何处理无法加载sap-ui-core.js的错误
- SAP Cloud for Customer Rule Editor的使用方法和底层工作原理
- SAP ABAP Webdynpro ALV的link to action的实现方法
- 如何实现SAP WebClient UI附件批量上传
- 如何使用SAP Intelligent Robotic Process Automation自动操作Excel
- SAP ABAP的权限检查跟踪(Authorization trace)工具使用步骤介绍
- 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization
- SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置
- SAP Spartacus里的place holder Component - CMSFlexComponent
- SAP Spartacus避免不能向下兼容的breaking changes
- 如何使用SAP Cloud for Customer OData服务创建Lead
- 通过一个具体的例子,讲解 SAP Cloud Platform Integration(CPI) 的使用方法
- 通过一个具体的例子,讲解 SAP Cloud Platform Integration(CPI) 的使用方法
- SAP UI5 应用开发教程之四十三 - SAP UI5 自带的 Support Assistant 工具使用方法介绍
- SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
- SAP UI5 确保控件 id 全局唯一的实现方法
- 如何在Chrome开发者工具里找出SAP Fiori frontend server的systen ID