实现文本框以及其背景（根据输入字数）动态拉伸

最新推荐文章于 2024-09-13 21:00:00 发布

Improve_life

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量908

点赞数

分类专栏： Unity组件使用文章标签： Vertival/Horizontol Layout Group组件结

本文链接：https://blog.csdn.net/Improve_life/article/details/88670770

版权

Unity组件使用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用Vertical Layout Group/Horizontol Layout Group实现文本框（根据输入字数）动态拉伸（文本框背景跟随文本框变化同时拉伸）

padding :用于在子布局元素周围添加的填充,使子元素周围留有空隙
spacing :间距布局组中布局元素之间使用的间距
childAlignment :	用于布局组中的子布局元素的对齐
childControlHeight :布局组控制其子元素的高度
childControlWidth  :布局组控制其子元素的宽度
childForceExpandHeight :是否要强制孩子膨胀以填充额外的可用垂直空间
childForceExpandWidth  :是否强制孩子扩展以填充额外的可用水平空间

第一种：利用Vertical Layout Group组件

1、建立一个Text文本框用来输入文字
在这里插入图片描述
2、在1建立的文本框上建立一个父物体“Image”作为文本背景图片（大小跟文本框的大小相同就行）
3、在2建立的“Image”上加Vertical Layout Group组件（并将其属性进行勾选）
如下图【1】所示：
图图图土语士士在这里插入图片描述图【1】
4、建立一个“空物体”（其长是你想控制文本不超过的长度、其宽是你想控制文本换行不超过的宽度）就是限制文本只能变到多大的一个东西，作为2的父物体
5、在4建立的“空物体”上加Vertical Layout Group组件（并将其属性进行勾选）
如下图【2】所示：
在这里插入图片描述
图【2】
如上图【2】所示，当文本框的长度达到Image(1)长度后，会自动换行，当宽度达到Image(1)的宽度后就不再显示多于的文字；
当字数减少时，背景也会相应自动减小，如下图【3】所示：

图【3】
解决多余字体不显示的问题：可以在Image(1)上再加一个组件Content Size Fitter,然后宽度不变，将竖直适应选上Preferred Size尺寸,然后就会使文本达到一定宽度后换行，能够一直换行，直到显示完所有文字。如下图【4】所示：
在这里插入图片描述
图【4】