为Unity实现的一套基于UGUI的弹性布局组件。

Flexbox弹性布局

什么是Flexbox

Flexbox详细介绍（必读！！！）

完整草案（慎点）

关键算法

扩大算法

按照grow权重分配多余空间即可，即grow / sum(grow)。

举例：

水平布局，container宽度为1000px，item宽度分别为300px，200px，100px，grow值分别为1、2、3。

则剩余1000 - 300 - 200 - 100 = 400px，扩大后item的宽度分别为

300 + 1 / (1 + 2 + 3) * 400 = 366.67px

200 + 2 / (1 + 2 + 3) * 400 = 333.33px

100 + 3 / (1 + 2 + 3) * 400 = 300px

特别地，当sum(grow) < 1的时候，sum(grow) = max(sum(grow), 1)，相当于剩余空间打了折扣，所以所有item加在一起不能占满容器空间。

若grow值分别为0.1、0.2、0.3，则item宽度最后分别为

300 + 0.1 / 1 * 400 = 340px

200 + 0.2 / 1 * 400 = 280px

100 + 0.3 / 1 * 400 = 220px

所以总结起来，每个item宽度的计算公式为

width + grow / sum(grow) * (containerWidth - sum(width)) * min(sum(grow), 1)

缩小算法

和扩大算法略有不同，如果简单按照shrink权重分配需要缩小的空间，则存在某个item宽度最后小于0的情况。

实际的算法是将item宽度一起加入计算权重，shrink * width / sum(shrink * width)。

举例：

上例中container宽度变为500px，shrink值分别为1、2、3。

需要缩小的宽度为300 + 200 + 100 - 500 = 100px，缩小后item宽度分别为

300 - 1 * 300 / (1 * 300 + 2 * 200 + 3 * 100) * 100 = 270px

200 - 2 * 200 / (1 * 300 + 2 * 200 + 3 * 100) * 100 = 160px

100 - 3 * 100 / (1 * 300 + 2 * 200 + 3 * 100) * 100 = 70px

同grow，特别地，当sum(shrink) < 1的时候，缩小空间也要打折扣。

若shrink值分别为0.1、0.2、0.3，则item宽度最后分别为

300 - 0.1 * 300 / (0.1 * 300 + 0.2 * 200 + 0.3 * 100) * 100 * 0.6 = 282px

200 - 0.2 * 200 / (0.1 * 300 + 0.2 * 200 + 0.3 * 100) * 100 * 0.6 = 176px

100 - 0.3 * 100 / (0.1 * 300 + 0.2 * 200 + 0.3 * 100) * 100 * 0.6 = 82px

所以总结起来，每个item宽度的计算公式为

width + shrink * width / sum(shrink * width) * (containerWidth - sum(width)) * min(sum(shrink), 1)

Unity中的Flexbox

UI Toolkit

UI Toolkit用户手册 (2020.3)

UI Toolkit编辑界面一览

默认所有UI元素都是以Flexbox来布局，可以轻而易举实现有最大宽度的可变宽文字和固定宽度按钮的整体居中功能。

UI Toolkit的Layout Engine基于Yoga layout

UGUI

默认不支持Flexbox布局，assetstore可以搜到一个收费packageFlexbox 4 Unity ($29.99)，基本实现了完整的Flexbox布局功能。

基于UGUI的Flexbox实现

源码详见FlexContainer.cs和FlexItem.cs，详细使用见FlexboxSample.prefab。

当前实现情况如下，已满足基本使用。

Container:

• flex-direction
  • row
  • row-reverse
  • column
  • column-reverse
• flex-wrap
  • no-wrap
  • wrap
  • wrap-reverse
• justify-content
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
• align-items
  • center
  • flex-start
  • flex-end
  • stretch
  • baseline
• align-content
  • normal
  • flex-start
  • flexend
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch
• gap
• auto-width
• auto-height

Item:

• order
• flex-basis
• flex-grow
• flex-shrink
• min-size
• max-size
• align-self