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 属性，因为项目无论如何都会占用所有可用空间。 不同的值之间不会有区别。