当前位置: 首页 > news >正文

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会获取到这些数据,进行最终的宽高计算

相关文章:

  • 心智模式与企业瓶颈突破
  • 云原生(六十) | Web源码迁移部署
  • AI辅助学习vue第十四章
  • 从神经元到大语言模型及其应用
  • 【前端基础】1、HTML概述(HTML基本结构)
  • 系统架构设计师—计算机基础篇—文件管理
  • 云服务培训五-数据库服务
  • 大语言模型微调的基本概念介绍
  • Git 安装与配置一站式指南
  • 【小羊肖恩】小羊杯 Round 2 C+K
  • 迷你世界脚本区域接口:Area
  • 如何防止Python网络爬虫爬取网站内容
  • 每日一题之因数计数
  • 【MySQL】索引(页目录、B+树)
  • 算法分析 —— 《栈》
  • [Lc滑动窗口_1] 长度最小的数组 | 无重复字符的最长子串 | 最大连续1的个数 III | 将 x 减到 0 的最小操作数
  • 蓝桥与力扣刷题(蓝桥 核桃的数量)
  • 研究生综合管理系统的开发与应用在农业大学中的实践
  • Redis详解(实战 + 面试)
  • C语言——文件操作
  • 那个公司建设网站/网络推广工作好干吗
  • 自己电脑做的网站如何映射到公网/公司网络推广方案
  • wordpress模板+美女站/指数搜索
  • 公司网站 源码/昆明网站seo优化
  • app小程序网站开发/windows优化大师值得买吗
  • 网站开发 需求文档/南宁关键词排名公司