![f85989a683d0281b5f15800ef8cc0535.png](https://i-blog.csdnimg.cn/blog_migrate/1138a949f2054b42178898295c549c97.jpeg)
初入Unity大门,在做界面时也走了一些弯路,这里记录下一些经验,也供分享。
想要创建一个可滚动的自动扩展文本框,并且在文本更新时能够自动滚动至最底部。在网上找了一些资料,都不太准确且有多余步骤,这里总结并精炼了一下步骤。
1、创建一个容器,用于添加ScrollRect组件,可以使用Panel也可以使用Image,推荐Panel。
![c36e79ad6f9f62e508ccba5c9dad0769.png](https://i-blog.csdnimg.cn/blog_migrate/374898c7a6b773dc7a3549e7938a0326.png)
2、在Panel下创建子元素Text,依需要设置好定位。
![b8298cd1727914caeb081273f6380a79.png](https://i-blog.csdnimg.cn/blog_migrate/0eb815e327e526306fb74810d203daed.png)
这是我的定位设置,其中Pivot X=0, Y=0.01,注意的是高度设置是没有意义的,因为下面会通过组件来控制高度。
![85f956ee01893a528baaeffa84536562.png](https://i-blog.csdnimg.cn/blog_migrate/486791d7fb8e9a7d5647deab15c09d26.png)
3、在Text中添加Layout组件中的Content Size Fitter,并设置Content Size Fitter中的Vertical Fit为”Preferred Size“。
![7bf4a84b4bc0bd7e32f5c7df2a6bde38.png](https://i-blog.csdnimg.cn/blog_migrate/b7fc280883c0596557781ff93186d1fc.png)
4、回到Panel,添加UI组件中的Mask和Scroll Rect组件,并设置Scroll Rect中的Content为之前添加的Text控件。因为我并不需要水平滚动,所以也将Horizontal属性清空。
![caea59b963e095b36d8b9f57c476b8ab.png](https://i-blog.csdnimg.cn/blog_migrate/ab0c142321281afdf02fb0536cd04418.png)
至此一个可滚动的文本框就建立完毕了,其文本显示范围由Panel决定。如果只是显示静态文本,在Text的text属性中输入文本即可。
下面是添加自动滚动代码的步骤。
5、打开代码编辑器,在你需要向该文本框输入内容的类中设定两个变量:
[SerializeField]
private Text textView;
[SerializeField]
private ScrollRect scrollControl;
添加如下函数:
public void WriteText(string text)
{
textView.text += "n"+ text;
StartCoroutine("ScrollToBottom");
}
IEnumerator ScrollToBottom()
{
yield return new WaitForEndOfFrame();
scrollControl.verticalNormalizedPosition = 0f;
}
稍微解释一下,scrollControl.verticalNormalizedPosition = 0f; 就是实现滚动自底部的代码,之所以不能立即调用,是因为控件写入值后需要一帧的时间来绘制,因此此时的滚动条位置是不准确的,必须等待该帧绘制完毕,再执行该行代码。
6、保存代码,回到Unity编辑器,将Panel关联至scrollControl变量、Text关联至textView变量即可。
添加滚动条的步骤比较简单,这里就不赘述了。
所有步骤在 Unity2017.3.0f3 版本中测试通过。