Unity：UGUI笔记(一)——三大基础控件、组合控件

霜绛2025-10-19 15:10

写在前面：

写本系列**(自用)** 的目的是回顾已经学过的知识、记录新学习的知识或是记录心得理解，方便自己以后快速复习，减少遗忘。这里只有代码相关部分，没有面板部分。

一、三大基础控件

1、Image

(1)RectTransform

在Hierarchy窗口右键->UI->创建Image对象。

UGUI中位置信息是继承了Transform的RectTransform：

可以直接通过父类装子类的方式使用RectTransform：

cs 复制代码 
void Start()
{
    print((this.transform as RectTransform).sizeDelta);
}

(2)Image

可以直接获取Image对象的脚本，就可以点出Inspector窗口上的所有信息：

其实在代码里常用的信息一般是修改Image关联的图片，因此这里只演示部分。

可以通过img.sprite修改Image关联的图片，img.color修改Image叠加的图片，.sizeDelta可以修改图片大小。

cs 复制代码 
void Start()
{
    Image img = this.GetComponent<Image>();
    img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

    (transform as RectTransform).sizeDelta = new Vector2(200, 200);

    img.color = Color.red;
}

运行前：

运行后：

2、Text

(1)text的使用

在Hierarchy窗口右键->UI->Legacy->Text创建老版本Text对象。

同样的，Text大多数都在Inspector窗口配置即可，代码一般只会修改Text文本内容：

cs 复制代码 
void Start()
{
    Text txt = this.GetComponent<Text>();
    txt.text = "hhhhh";
}

运行后：

(2)富文本

如下所示，在之前NGUI也有提过。

3、RawImage

一般Image关联的是精灵图片，RawImage关联的是大图片，可以是Sprite类型、Texture类型。RawImage用于背景图。在Hierarchy窗口右键->UI->创建RawImage对象。

RawImage一般也很少用代码修改，可以直接.texture修改RawImage的图像，.uvRect修改位置信息。

cs 复制代码 
void Start()
{
    RawImage rawImage = this.GetComponent<RawImage>();

    rawImage.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");

    rawImage.uvRect = new Rect(0, 0, 1, 1);
}

二、组合控件

1、Button

(1)代码修改参数

可以在Hierarchy窗口右键->UI->Legacy->Button创建老版本Button对象。

代码修改Button的场景不多，和上文三个组件相同，也是获取Button脚本点出面板参数进行修改。

其中，.interactable控制的是按钮是否激活。如果是true为激活，按钮可以按下；如果是false按钮会变灰，不能响应点击。

.transition控制的是按钮状态变化（鼠标经过、按下）时的效果，设置为None就没有任何效果。

cs 复制代码 
void Start()
{
    Button btn = this.GetComponent<Button>();

    btn.interactable = true;
    btn.transition = Selectable.Transition.None;
}

(2)事件函数

事件函数有两种添加方式。Button事件在按钮点击时会调用事件函数，在按钮内部完成一次按下抬起才算完成了一次按钮点击。

第一种方式为代码拖曳。在脚本中书写public函数（注意必须是public，private函数不能拖曳响应）。然后在Inspector窗口中关联即可：

cs 复制代码 
void Start()
{
    Button btn = this.GetComponent<Button>();
}

//在按钮内部完成一次按下抬起才算完成了一次按钮点击
//拖曳代码
public void ClickBtn()
{
    print("按钮点击");
}

也可以通过关联代码的方式：可以直接使用lambda表达式也可以直接为事件添加函数：

cs 复制代码 
void Start()
{
    Button btn = this.GetComponent<Button>();

    btn.onClick.AddListener(ClickBtn2);
    btn.onClick.AddListener(() =>
    {
        print("按钮点击3");
    });
}

private void ClickBtn2()
{
    print("按钮点击2");
}

移除事件的方式：注意，这样并不会移除拖曳添加的事件。

cs 复制代码 
void Start()
{
    Button btn = this.GetComponent<Button>();

    btn.onClick.RemoveListener(ClickBtn2);
    btn.onClick.RemoveAllListeners();
}

2、Toggle

(1)代码修改参数

可以通过右键->UI->Toggle创建一个Toggle：

同样的，可以获取Toggle脚本后，通过代码控制Inspector窗口上的值。

其中最常用的API是tog.isOn，可以获取当前Toggle是否被选择，这个值也可以被打印出来。

cs 复制代码 
void Start()
{
    Toggle tog = this.GetComponent<Toggle>();

    tog.isOn = true;
    print(tog.isOn);
}

如果想制作Toggle单选框，即多个Toggle为一组，可以选择ToggleGroup。创建一个父对象（可以是空对象），为其挂载Toggle Group脚本：

之后就可以将所有需要作为单选框的Toggle设置为该对象的子对象（这一步主要是为了方便管理，不设置为父对象也可以）。然后在每个子对象的Inspector页面上将父对象拖入至Group处：

这样，这些子对象中就只能有一个Toggle被选择了。

Allow Switch Off勾选项的作用是，是否允许一个Toggle都不选择，如果勾选了Allow Switch Off，那么就允许，如果没勾选就是不允许。

在代码中，togGroup.ActiveToggles()可以获取当前所有被选择（激活）的Toggle对象，这样就能通过遍历得到所有被选择的对象。如下：

cs 复制代码 
void Start()
{
    Toggle tog = this.GetComponent<Toggle>();

    ToggleGroup togGroup = this.GetComponent<ToggleGroup>();
    togGroup.allowSwitchOff = false;

    foreach(Toggle item in togGroup.ActiveToggles())
    {
        print(item.name + " " + item.isOn);
    }
}

(2)事件函数

Toggle的事件函数是onValueChanged，书写方式和Button一样，一种是代码拖曳，一种是直接通过代码添加。直接通过代码添加的方式会更加常用，这里不过多赘述这两种方式。

需要注意的是，toggle的事件选择函数必须传入一个bool参数，这个参数代表的就是当前Toggle是否被选中：

cs 复制代码 
void Start()
{
    Toggle tog = this.GetComponent<Toggle>();

    tog.onValueChanged.AddListener((isOn) =>
    {
        print("状态改变2" + isOn);
    });
}

//必须要这个bool参数，拖曳时一定要选择动态的
public void ChangeValue(bool isOn)
{
    print("状态改变" + isOn);
}

3、InputField

(1)代码修改参数

InputField是输入框，可以通过Create-UI-Legacy-InputField创建一个输入框：

其中Enter text是提示词，一般不修改。在输入框中，一般会通过代码获取的就是输入框的内容，可以通过input.text获取。

cs 复制代码 
void Start()
{
    InputField input = this.GetComponent<InputField>();
    print(input.text);
    input.text = "123";
}

(2)事件函数

输入框有两个事件函数，一个是改变输入内容时调用的事件函数onValueChanged，一个是结束输入时调用的事件函数onEndEdit。同样也是有两种方式：代码拖拽和事件添加：

cs 复制代码 
void Start()
{
    InputField input = this.GetComponent<InputField>();

    input.onValueChanged.AddListener((str) =>
    {
        print("改变的输入内容2" + str);
    });

    input.onEndEdit.AddListener((str) =>
    {
        print("结束输入时的内容2" + str);
    });

}

public void ChangeInput(string str)
{
    print("改变的输入内容" + str);
}

public void EndInput(string str)
{
    print("结束输入时的内容" + str);
}

需要注意的是，在拖拽事件函数时，需要选择Dynamic处的函数。

4、Slider

(1)代码控制

Create-UI-Slider即可创建一个Slider。

一般只会通过代码获取Slider当前的值。

cs 复制代码 
void Start()
{
    Slider s = this.GetComponent<Slider>();
    print(s.value);
}

(2)事件函数

Slider的事件函数是onValueChanged，必须传入float参数，该参数表示Slider当前的值。

cs 复制代码 
void Start()
{
    Slider s = this.GetComponent<Slider>();

    s.onValueChanged.AddListener((v) =>
    {
        print(v);
    });
}

//必须传入float参数
public void ChangeValue(float v)
{
    print(v);
}

5、ScrollBar

(1)代码控制

ScrollBar一般配合ScrollView使用。右键Create-UI-Scrollbar即可创建一个ScrollBar。

一般不太会通过代码设置ScrollBar的参数。

cs 复制代码 
void Start()
{
    Scrollbar sb = this.GetComponent<Scrollbar>();
    print(sb.value);
    print(sb.size);
}

(2)事件函数

ScrollBar的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个float参数，代表当前拖动条的位置。

cs 复制代码 
void Start()
{
    Scrollbar sb = this.GetComponent<Scrollbar>();

    sb.onValueChanged.AddListener((v) =>
    {
        print(v);
    });
}

public void ChangeValue(float v)
{
    print(v);
}

6、ScrollView

(1)代码控制

右键Create-UI-ScrollView即可创建一个ScrollView。

可以看出，ScrollView上有两个ScrollBar。这两个ScrollBar可以在Scroll Rect脚本中删除。

需要注意的是ScrollView上挂载的脚本名字稍微有点变化，为Scroll Rect。可以通过.content.sizeDelta改变ScrollView内容部分的大小，可以拖动多少都是根据这个尺寸来决定的。

.normalizedPosition表示滚动区域当前滚动的位置。

cs 复制代码 
void Start()
{
    ScrollRect sr = this.GetComponent<ScrollRect>();
    //改变内容的大小，具体可以 拖动多少都是根据它的尺寸来的
    sr.content.sizeDelta = new Vector2(200, 200);

    sr.normalizedPosition = new Vector2(0, 0.5f);
}

(2)事件函数

ScrollView的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个Vector2参数，代表当前滚动区域上滚动的位置。

cs 复制代码 
void Start()
{
    ScrollRect sr = this.GetComponent<ScrollRect>();

    sr.onValueChanged.AddListener((Vector2 vec) =>
    {

    });
}

public void ChangeValue(Vector2 vec)
{
    print(vec);
}

7、Dropdown

(1)代码控制

Dropdown是下拉列表，可以通过Create-UI-Legacy-InputField创建一个下拉列表。

可以通过.value来获得当前选择的索引值，.options[dd.value].text可以获得当前选择索引值的内容，例如Option A。

可以通过.options.Add()添加新的选择项。括号内的选项可以这样创建new Dropdown.OptionData(选项名)

cs 复制代码 
void Start()
{
    Dropdown dd = this.GetComponent<Dropdown>();

    print(dd.value);
    print(dd.options[dd.value].text);

    dd.options.Add(new Dropdown.OptionData("123123"));
}

(2)事件函数

Dropdown的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个int参数，代表当前选择的选项。

cs 复制代码 
void Start()
{
    Dropdown dd = this.GetComponent<Dropdown>();

    dd.onValueChanged.AddListener((int value) =>
    {
        print(value);
    });
}

public void ChangeValue(int value)
{
    print(value);
}
相关推荐
代码or搬砖3 小时前
Git学习笔记（三）
笔记·git·学习
阿维的博客日记3 小时前
Redis学习笔记-QuickList
redis·笔记·学习
Moniane4 小时前
CSDN:打造专业的技术名片
学习
CappuccinoRose4 小时前
MATLAB学习文档（二十四）
学习·数学建模·matlab·数据可视化
菜鸟‍4 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
今天只学一颗糖4 小时前
Linux学习笔记--GPIO子系统和PinCtrl子系统
linux·笔记·学习
lingggggaaaa4 小时前
小迪安全v2023学习笔记（一百三十四讲）—— Windows权限提升篇&数据库篇&MySQL&MSSQL&Oracle&自动化项目
java·数据库·windows·笔记·学习·安全·网络安全
StarPrayers.6 小时前
损失函数（Loss Function）、反向传播（Backward Propagation）和优化器（Optimizer）学习笔记
人工智能·笔记·深度学习·学习
明月5667 小时前
github开源笔记应用程序项目推荐-Joplin
笔记·开源·joplin·跨平台笔记应用
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答06KGG转MP3工具|非KGM文件|解密音频07荣耀手机2025年10月发布的新品Magic8比起Magic7，在硬件、性能、价格等上有什么区别，有什么优势08GitLab 零基础入门指南：从安装到项目管理全流程09windows找不到gpedit.msc（本地组策略编辑器）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南