使用*Vertical Layout Group/Horizontol Layout Group实现文本框(根据输入字数)动态拉伸(文本框背景跟随文本框变化同时拉伸)
padding :用于在子布局元素周围添加的填充,使子元素周围留有空隙
spacing :间距布局组中布局元素之间使用的间距
childAlignment : 用于布局组中的子布局元素的对齐
childControlHeight :布局组控制其子元素的高度
childControlWidth :布局组控制其子元素的宽度
childForceExpandHeight :是否要强制孩子膨胀以填充额外的可用垂直空间
childForceExpandWidth :是否强制孩子扩展以填充额外的可用水平空间

第一种:利用Vertical Layout Group组件

1、建立一个Text文本框用来输入文字
使用Vertical Layout Group/Horizontol Layout Group组合Content Size Fitter组件实现文本框以及其背景(根据输入字数)动态拉伸
2、在1建立的文本框上建立一个父物体“Image”作为文本背景图片(大小跟文本框的大小相同就行)
3、在2建立的“Image”上加Vertical Layout Group组件(并将其属性进行勾选)
如下图【1】所示:
图图图土语士士使用Vertical Layout Group/Horizontol Layout Group组合Content Size Fitter组件实现文本框以及其背景(根据输入字数)动态拉伸 图【1】
4、建立一个“空物体”(其长是你想控制文本不超过的长度、其宽是你想控制文本换行不超过的宽度)就是限制文本只能变到多大的一个东西,作为2的父物体
5、在4建立的“空物体”上加Vertical Layout Group组件(并将其属性进行勾选)
如下图【2】所示:
使用Vertical Layout Group/Horizontol Layout Group组合Content Size Fitter组件实现文本框以及其背景(根据输入字数)动态拉伸
图【2】
如上图【2】所示,当文本框的长度达到Image(1)长度后,会自动换行,当宽度达到Image(1)的宽度后就不再显示多于的文字;
当字数减少时,背景也会相应自动减小,如下图【3】所示:
使用Vertical Layout Group/Horizontol Layout Group组合Content Size Fitter组件实现文本框以及其背景(根据输入字数)动态拉伸
图【3】
解决多余字体不显示的问题:可以在Image(1)上再加一个组件Content Size Fitter,然后宽度不变,将竖直适应选上Preferred Size尺寸,然后就会使文本达到一定宽度后换行,能够一直换行,直到显示完所有文字。如下图【4】所示:
使用Vertical Layout Group/Horizontol Layout Group组合Content Size Fitter组件实现文本框以及其背景(根据输入字数)动态拉伸
图【4】

第二种:利用Vertical Layout Group组件

除添加组件不同外,与第一种步骤相同

第三种:利用两种组件

除(两个父物体上分别添加任意一个组件)但添加的组件不同外,与第一种步骤相同

相关文章:

  • 2021-03-31
  • 2021-07-13
  • 2022-12-23
  • 2022-01-01
  • 2022-12-23
  • 2021-11-28
  • 2022-12-23
  • 2021-04-17
猜你喜欢
  • 2021-12-13
  • 2021-09-09
  • 2021-07-29
  • 2021-12-21
  • 2021-04-28
  • 2021-06-24
相关资源
相似解决方案