SAP UI5 应用 FlexBox 控件 growFactor 的使用方法

简介: SAP UI5 应用 FlexBox 控件 growFactor 的使用方法

使用 Flex Box Layout 布局方式,开发人员可以让浏览器处理元素的分布。 这确保应用的元素始终填充沿主轴的可用空间。 为了达到这个目的,需要为 Flex Item 设置一个弹性系数(flexibility factor)。


控制 flexibility factor 的具体属性称为 growFactor。它通过 layoutData 聚合上的 FlexItemData 设置在弹性项目对象上。


下图是一个例子:


image.png


弹性布局算法决定弹性项目的 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 属性,因为项目无论如何都会占用所有可用空间。 不同的值之间不会有区别。


相关文章
|
5月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
82 1
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
16 0
|
5月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
5月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码

热门文章

最新文章

下一篇
无影云桌面