UGUI自动扩张的聊天气泡制作时的问题

一个聊天气泡的基本结构是一张Image作为背景，上面叠加一个文字组件，随着文本内容的增加，背景图片会跟着扩张 而想要达成这种效果，需要分别在Image和Text上添加组件

1. 对于背景的Image

需要VerticalLayoutGroup和ContentSizeFitter，这两个组件缺一不可，且ContentSizeFitter的Vectical Fit需要设置为Preferred Size

2. 对于Text

需要ContentSizeFitter调整自身大小

3. 原理探究

为什么Imgae上必须有VerticalLayoutGroup和ContentSizeFitter这两个组件？首先看下两个组件的说明 从字面上能看到，垂直布局组能够确定当前布局组自身的最小高度或偏好高度，而内容大小适配器是根据布局元素的最小或偏好值来改变宽高的

接下来查看源码

4. 先看VerticalLayoutGroup

方法都在LayoutRebuilder中调用 但改变自身属性的是CalculateLayoutInputHorizontal和CalculateLayoutInputVertical这两个方法

继续深入 此方法会“沿给定轴计算此布局元素的布局元素属性” 以上是DeepSeek的解释，其中对于combinedPadding的计算就是组件上的Padding属性 继续深入

此方法会将计算出来的属性保存下来

4. 再看ContentSizeFitter

主要改变方法为这两个 即依旧在LayoutRebuilder中调用 继续深入，主要看LayoutUtility.GetMinSize和LayoutUtility.GetPreferredSize这两个方法 可以看到，在计算最终布局属性时，传入的是e.minHeight和e.preferredHeight，而e是一个ILayoutElement，正好LayoutGroup系列的组件都是ILayoutElement

在LayoutGroup中，preferredHeight指向另一个方法 取的就是LayoutGroup自身存储的数据

5. 总结

LayoutGroup类的组件会根据子物体不断该改变其最小或偏好数据（如果是LayoutElement组件的话，值是固定不变的），然后ContentSizeFitter会获取到这些数据，进行最终的宽高计算