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

红黑色的圣西罗

已于 2025-04-28 15:15:16 修改

阅读量489

点赞数 3

分类专栏： Unity UI 文章标签： unity

于 2025-03-02 21:59:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_22626987/article/details/145965638

版权

Unity UI 专栏收录该内容

11 篇文章

订阅专栏

一个聊天气泡的基本结构是一张Image作为背景，上面叠加一个文字组件，随着文本内容的增加，背景图片会跟着扩张
在这里插入图片描述

而想要达成这种效果，需要分别在Image和Text上添加组件

1. 对于背景的Image

在这里插入图片描述
需要VerticalLayoutGroup和ContentSizeFitter，这两个组件缺一不可，且ContentSizeFitter的Vectical Fit需要设置为Preferred Size

2. 对于Text

在这里插入图片描述
需要ContentSizeFitter调整自身大小
或

将Image的Control Child Size启用，Text不使用Content Size Fitter，推荐这种方式

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
在这里插入图片描述