Unity 3D GUI教程｜｜OnGUI TextArea 控件｜｜OnGUI ScrollView 控件

OnGUI TextArea 控件

Unity 3D TextArea 控件用于创建一个多行的文本编辑区。用户可以在多行文本编辑区编辑文本内容。

该控件可以对超出控件宽度的文本内容实现换行操作。

TextArea 控件同样会将当前文本编辑区中的文本内容以字符串形式返回。

开发人员可以通过创建 String 变量来接收返回值并实现相关功能。

具体使用方法如下：

1. public static function TextArea(position:Rect, text:string):string;
2. public static function TextArea(position:Rect, text:string, maxLength:int):string;
3. public static function TextArea(position:Rect, text:string, style:GUIStyle):string;
4. public static function TextArea(position:Rect, text:string, maxLength:int,style:GUIStyle):string;

注：

• 其中，position 为显示位置。

• text 为字符。

参数列表

参数	描述
position	设置控件在屏幕上的位置及大小。
maxLength	设置输入的字符串的最大长度。
text	设置控件上默认显示的文本。
style	设置控件使用的样式。

使用案例

1. 创建项目，将其命名为 GUI.TextArea，保存场景。

1. 执行 Assets → Create → JavaScript 命令，创建一个新的脚本文件。

1. 在 Project 视图中打开脚本编辑器，输入下列语句：

1. var stringToEdit:String="Hello World\nI've got 2 lines...";
2. function OnGUI(){
3. stringToEdit=GUI.TextArea(Rect(10, 10, 200, 100), stringToEdit, 200);
4. }

1. 按 Ctrl+S 键保存脚本。

1. 在 Project 视图中选择脚本，并将其拖曳到 Hierarchy 视图中的 Main Camera 上，使脚本和摄像机产生关联。

1. 进行脚本测试，如下图所示。

 OnGUI ScrollView 控件

当游戏界面中的内容特别多，超出了屏幕的显示范围时，就可以使用 Unity 3D ScrollView 控件滚动显示界面内的全部内容。

ScrollView 控件用于在屏幕上创建滚动视图，通过一片小区域查看较大区域的内容。当内容区域大于查看区域时，该控件就会自动生成垂直（水平）滚动条，用户可以通过拖曳滚动条来查看所有内容。

一般情况下，滚动条由两部分组成：

• GUI.BeginScrollView，用于开始滚动视图。

• GUI.EndScrollView，用于结束滚动视图。

需要滚动显示的内容就夹在其间。

使用方法：

1. public static function BeginScrollView(position:Rect, scrollPosition:Vector2,viewRect:Rect):Vector2;
2. public static function BeginScrollView(position:Rect, scrollPosition:Vector2,viewRect:Rect, alwaysShowHorizontal:bool, alwaysShowVertical:bool,horizontalScrollbar:GUIStyle, verticalScrollbar:GUIStyle):Vector2;
3. public static function EndScrollView():void;

参数列表

参数	描述
position	设置控件在屏幕上的位置及大小。
viewRect	设置滚动整体显示范围。
HorizontalScrollbar	设置用于水平滚动条的可选 GUI 样式。
VerticalScrollbar	设置用于垂直滚动条的可选 GUI 样式。
ScrollPosition	用来显示滚动位置。
alwaysShowHorizontal	可选参数，总是显示水平 滚动条。
alwaysShow Vertical	可选参数，总是显示垂直 滚动条。

使用案例

1. 创建项目，将其命名为 BeginScrollView，保存场景。

1. 执行 Assets → Create → JavaScript 命令，创建一个新的脚本文件。

1. 在 Project 视图中打开脚本编辑器，输入下列语句：

1. var scrollPosition:Vector2=Vector2.zero;
2. function OnGUI(){
3. scrollPosition=GUI.BeginScrollView(Rect(10, 300, 100, 100),
4. scrollPosition, Rect(0, 0, 220, 200));
5. GUI.Button(Rect(0, 0, 100, 20), "Top-left");
6. GUI.Button(Rect(120, 0, 100, 20), "Top-right");
7. GUI.Button(Rect(0, 180, 100, 20), "Bottom-left");
8. GUI.Button(Rect(120, 180, 100, 20), "Bottom-right");
9. GUI.EndScrollView();
10. }

1. 按 Ctrl+S 键保存脚本。

1. 在 Project 视图中选择脚本，将其连接到 Main Camera 上。

1. 进行测试，效果如下图所示。