文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View

文字少的时候,直接显示文字;文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字。

  • 1、字少的时候
    在这里插入图片描述

  • 2、字多的时候自动增加一个垂直滑动条
    在这里插入图片描述

一、问题的来源

在一个固定区域显示文字,这些文字有时候会很多,有时候又比较少,多的时候需要显示不全,需要滑动条。
在这里插入图片描述

  • 1、字少的时候
    在这里插入图片描述

  • 2、字多的时候自动增加一个垂直滑动条
    在这里插入图片描述

二、实现的方法

1、第一步,Text文本框添加内容自适应组件ContentSizeFitter

在这里插入图片描述
【1】设置ContentSizeFitter为垂直方向内容自适应,也就是当内容很多的时候,文本框在垂直方向自己伸展,水平方向保持不变。
【2】一些属性的设置
在这里插入图片描述
图示1:设置了该text伸展时,上方不动,往下拓展
图示2:把该text的锚点调节到顶部,不然它默认在text几何中心

2、第二步,添加一个Scroll View组件,这个组件大小刚好覆盖text区域

在这里插入图片描述

3、第三步,关联Scroll View和Text【关键一步】

  • 1、Scroll view自动伸展的秘诀——Content
    在这里插入图片描述
    插曲: 当Content内容增多的时候,组件自己计算滑动值的大小
    之前绕了许多弯路,拼命在Content里面装这个会伸展的Text,最终以失败告终,后来用代码实时把text的高度赋值给Conten,发现读text高度值的时候,读到的不是扩展后的值。后来突发奇想,直接把Conten换成Text不是更直接吗?

  • 2、重置Content的对象

scrollView.GetComponent<ScrollRect>().content = myTexts.rectTransform;

在这里插入图片描述

重置content后的层级关系图
在这里插入图片描述
把text拖到scroll view中,与Content对象同级

  • 3 、修正text的位置
    每次Scroll view显示完文本后,发现text文本框的位置会被移动,直接暴力解决,在现实文本前,把把Content的位置赋给text
myTexts.transform.position = scrollView.GetComponent<ScrollRect>().transform.position);//初始化位置
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值