Layout Element 参数讲解

如果你说的是 Unity UI 的 Layout Element 组件(UnityEngine.UI.LayoutElement),它的作用是:告诉 Unity 的自动布局系统,这个 UI 元素希望占多大空间、优先级多高,以及是否应该忽略自身的 RectTransform 尺寸。

https://images.openai.com/static-rsc-4/EUbZ432nzAzQcBrKNFyZsV4hdcpwvw9JHOA5RhexAT8vaADxDPnArs1S_GMWnh2f0_2pyb9yB8306PNMRcYi9Wz2or85XeLIDZccUlk35BhLhj3nRH0SmTk-czzmu0eE7liuCzvfIvrfJJb9CEaiHzd8PX4398vV6eljfLSx7Z2PN8i4ZqlwbeNFhDZgh24N?purpose=fullsize
https://images.openai.com/static-rsc-4/0ozrfyZ2coDOLOoCiMOLnyfvcYC2n6h4tOntu-TChDqCJdoEi1SVkiDOzADE3DxcW-aNHPdC4MTHDfbj2Jkytl-FFFe-316uqLHQgzGPSF7HOHknWa_gcbgV8gO4KmcGkCUx3XptDgvIMqvFdEv3hRT574uBr3C7DYP34AE0GsL5TO8_Y9HI2tu5qo90tnqF?purpose=fullsize
https://images.openai.com/static-rsc-4/4GfI8CKjoXwDbeP1bjki9tNXryZO9rwrBHSOoyRPbrkreYqgbn8tyDfjs-TLjtU_laQM1AU4VRTFIAvJppsIh-WJUJnltoyvINnL44hZpL37Kzq2jWcr_wHzJdXV7kpO4nh6ofgU2TflpD-izKQzsrWAxxigva1DvW_lNtUtp8y1y65_owFnC0I14T2eti4X?purpose=fullsize

5

参数逐个解释

参数含义典型用途
Ignore Layout是否完全忽略 Layout Group 的布局某个子物体想脱离自动布局
Min Width最小宽度防止控件被压得太窄
Min Height最小高度防止控件被压得太矮
Preferred Width首选宽度希望布局系统给它的正常宽度
Preferred Height首选高度希望布局系统给它的正常高度
Flexible Width可扩展宽度父容器有多余空间时,允许它吃多少
Flexible Height可扩展高度父容器有多余空间时,允许它吃多少
Priority布局属性优先级多个组件同时提供尺寸信息时决定谁优先
Layout Priority某些 Unity 版本显示的名称本质上就是布局优先级

1. Min Width / Min Height

表示最小尺寸。

例如:

Min Width = 100

意味着这个元素通过 Layout Group 计算出来的宽度不会低于 100。

例如父物体宽度只有 500:

A Min Width = 100
B Min Width = 200
C Min Width = 300

理论上总需求:

100 + 200 + 300 = 600

但父容器只有 500,那么布局系统可能会压缩,但不会低于这些元素声明的最小尺寸;最终可能出现内容超出父容器。


2. Preferred Width / Preferred Height

这个参数非常重要。

它表示:

“如果空间足够,我希望你给我这么大。”

比如:

Preferred Width = 300

并不是说一定是 300。

例如父容器宽度:

1000

有其他布局规则的情况下,它可能得到:

300

但如果空间不足:

父容器 = 200
Preferred Width = 300

那么不一定能够得到 300。

所以可以简单理解成:

Min     = 最低要求
Preferred = 正常期望
Flexible  = 有多余空间时还能继续长多少

3. Flexible Width / Flexible Height

这个是最容易搞混的。

假设:

Horizontal Layout Group

里面有两个元素:

A Flexible Width = 1
B Flexible Width = 2

如果父容器在满足所有 Min / Preferred 后,还剩:

300 px

那么剩余空间会按照:

1 : 2

分配:

A = 100
B = 200

所以:

Flexible Width = 1

并不是:

宽度增加 1 像素

而是:

参与瓜分剩余空间的权重是 1。


4. 一个非常典型的例子

比如做一个这样的 UI:

┌─────────────────────────────────────┐
│  Icon   玩家名称              [按钮] │
└─────────────────────────────────────┘

你可能设置:

Icon

Preferred Width = 80
Flexible Width = 0

玩家名称

Preferred Width = 150
Flexible Width = 1

Button

Preferred Width = 100
Flexible Width = 0

那么:

Icon       固定倾向 80
玩家名称    至少/正常 150,并且可以吃剩余空间
Button     固定倾向 100

如果父容器越来越宽:

800 px

那么多出来的空间主要给:

玩家名称

因为:

玩家名称 Flexible Width = 1

这就是 Layout Element 最常见的使用方式。


5. Min / Preferred / Flexible 三者的关系

可以把它理解成:

       最小         正常          可以继续增长
        ↓            ↓               ↓
      Min        Preferred       Flexible
       │────────────│─────────────────>

例如:

Min Width      = 100
Preferred Width = 200
Flexible Width  = 1

意思大概就是:

我至少需要 100,正常希望 200,如果还有多余空间,可以继续扩展。


6. Flexible = 0 是什么意思?

这个也很重要。

假设:

Preferred Width = 200
Flexible Width = 0

通常可以理解为:

我不主动要求瓜分父容器剩余空间。

因此它倾向于保持自己的 Preferred Width。

例如:

父容器 = 1000

A:
Preferred = 200
Flexible = 0

B:
Preferred = 200
Flexible = 1

那么大致会变成:

A = 200
B = 800

而不是:

A = 500
B = 500

7. Ignore Layout

这个很直接。

Ignore Layout = true

表示:

Layout Group 不再管理我。

例如:

Panel
 └─ Horizontal Layout Group
     ├─ Button A
     ├─ Button B
     └─ Decoration

如果 Decoration 不想参与布局:

Decoration
└─ Layout Element
   └─ Ignore Layout = true

那么 Layout Group 会把它当作不存在。

但注意:

它仍然存在,也仍然会渲染。

只是:

Layout Group
    ↓
不管它的位置/尺寸

你可以自己控制它的 RectTransform。


8. Layout Priority

这个参数主要用于:

多个布局组件同时对同一个对象提供布局信息时,谁优先。

例如一个物体同时存在:

Content Size Fitter
Layout Element
其他 Layout Controller

或者有多个组件提供:

Min Width
Preferred Width
Flexible Width

Unity 会根据 Layout Priority 决定采用哪个组件的信息。

一般情况下你可以:

Priority = 1

不用特别管。

只有在复杂 UI 布局冲突的时候才比较重要。


9. Layout Element 不会自己布局

这是理解它最重要的一点。

Layout Element 本身不是:

“我要把自己设置成 300×100。”

而是:

“我向父级 Layout Group 报告:我的布局需求是这样。”

真正执行布局的一般是:

Horizontal Layout Group
Vertical Layout Group
Grid Layout Group

以及其他 Layout Controller。

可以理解成:

Layout Element
     ↓
提供需求
     ↓
Layout Group
     ↓
计算所有子物体
     ↓
修改 RectTransform

10. 最常见的组合

固定宽度

Min Width = 100
Preferred Width = 100
Flexible Width = 0

效果:

≈ 100

可以填满剩余空间

Min Width = 100
Preferred Width = 100
Flexible Width = 1

效果:

至少 100
正常 100
有剩余空间就继续扩大

两个元素平分剩余空间

A Flexible Width = 1
B Flexible Width = 1

剩余空间:

500

则:

A +250
B +250

1:2 比例分配

A Flexible Width = 1
B Flexible Width = 2

剩余:

600

那么:

A +200
B +400

最后记一个简单公式

对于 Horizontal Layout Group,可以粗略记成:

Min       = 不能再小
Preferred = 正常想要多大
Flexible  = 有多余空间时,按权重分

例如:

┌────────────── 父容器 ──────────────┐
│                                    │
│  Min ←── Preferred ──→ Flexible   │
│ 100       200             1        │
│                                    │
└────────────────────────────────────┘
上一篇
下一篇