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月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
333 0
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
前端开发 容器
SAP UI5 应用里 FlexBox 控件的设计原理
SAP UI5 应用里 FlexBox 控件的设计原理
|
前端开发 Shell 测试技术
SAP UI5 应用里一些容器控件的介绍
SAP UI5 应用里一些容器控件的介绍
|
C# 容器
Winform控件优化之TabControl控件的美化和功能扩展
在基本的TabControl控件使用和功能之上,可以尝试对其进行美化和功能扩展,比如动态删除或添加tab、绘制图标按钮及鼠标hover时的背景变化、Tab从右向左布局的优化处理等。最重要...
2532 0
Winform控件优化之TabControl控件的美化和功能扩展
|
2月前
|
存储 设计模式 开发框架
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
|
4月前
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
262 1
|
前端开发 容器
SAP UI5 里 FlexBox 的使用方法
SAP UI5 里 FlexBox 的使用方法
|
5月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
82 1
|
5月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
387 0