Chinar blog ：www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI Button 组件

---

本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能

Chinar —— 心分享、心创新！ 助力快速掌握 Unity UGUI Button 组件的使用 为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：

---

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Presentation —— 介绍

Button 组件是一个按钮组件。
它在我们开发中经常使用，通过点击按钮：执行某些事件，动作，切换状态等...

1.1 Attribute —— 属性

我们创建一个 Button 组件看一下它的属性：

在Unity的 Hierarchy 面板上右键–>UI–>Button


在Inspector面板中可以看到，一个Button对象比Image对象多了：

• Button 组件
• Text 子物体

下面看一下每个属性的详细功能介绍

属性	功能
Interactable	是否启用按钮，取消则按钮出去失效状态
Color	图片的颜色
Transition	按钮状态过渡的类型：None、 Color Tint 、 Sprotes Swap、Animation四种类型，默认为 Color Tint
Navigation	导航
On Click	按钮点击事件的列表。点击后执行哪些函数，在这里可以手动添加

---

1.2 Transition Setting —— 过渡类型详解

类型	功能
None	无过渡效果
Color Tint	颜色过渡
Sprotes Swap	图片过渡
Animation	动画过渡

---

1.2.1 Color Tint —— 颜色过渡

属性	功能
Target Graphic	( 按钮目标图 )：按钮处于正常状态的图形
Normal Color	正常状态下的颜色
Highlighted Color	指针悬浮在按钮上，高亮时的颜色
Pressed Color	按下按钮时的颜色
Disabled Color	禁用时按钮的颜色
Color Multiplier	将每个过渡的色调颜色乘以其值。使用此功能，可以创建大于1的颜色，使基本颜色小于白色（或小于完整alpha）的图形元素上的颜色（或Alpha通道）变亮。
Fade Duration	各个状态过渡的时间 ( 以秒为单位 )

---

1.2.2 Sprotes Swap —— 图片过渡

属性	功能
Target Graphic	( 按钮目标图 )：按钮处于正常状态的图形
Highlighted Sprite	指针悬浮在按钮上，高亮时的图片
Pressed Sprite	按下按钮时的图片
Disabled Sprite	禁用按钮时的图片

---

1.2.3 Animation —— 动画过渡

属性	功能
Normal Trigger	普通动画-触发器
Highlighted Trigger	高亮动画-触发器
Pressed Trigger	按下动画-触发器
Disabled Trigger	禁用动画-触发器

---

2

Use —— 使用

2.1 AddListener —— 添加监听函数

• 我们首先需要一个函数，来添加到监听列表中
• 从而使按钮被点击后函数被执行

创建脚本，写下我们的测试代码

using UnityEngine;public class ChinarButton : MonoBehaviour
{/// <summary>/// 按钮点击方法/// </summary>public void OnClickTest(){print("ChinarOnClickTest");}
}

将脚本绑定到相机对象上，再添加到 OnClick/点击事件 的列表中

运行后效果：

---

通过脚本，动态绑定监听函数

• 1 先获取到 目标对象的Button 组件
• 2 通过.onClick.Addlistener(函数) 的方式进行动态添加
• 3 如函数具有参数，可通过Lambda表达式 .onClick.AddListener(Lambda表达式) 动态添加
• 4 如函数具有参数，可通过委托 .onClick.AddListener(delegate {函数;}) 动态添加

    private Button testBtn;void Start(){GameObject.Find("Button").GetComponent<Button>();testBtn.onClick.AddListener(OnClickTest);testBtn.onClick.AddListener(() => OnClick_Parameter("lambda 表达式"));testBtn.onClick.AddListener(delegate { OnClick_Parameter("Delegate 委托"); });}/// <summary>/// 点击函数：带形参/// </summary>public void OnClick_Parameter(string arg){print(arg);}/// <summary>/// 点击函数：无参/// </summary>public void OnClickTest(){print("ChinarOnClickTest");}

至此：您已完美征服了 UGUI - Button

其他组件请继续学习，贴心的 Chinar 为您准备了 UGUI 全套教程

Unity UGUI 完整系列教程 (Chinar中文图解)

---

3

Project —— 项目文件

Unity 版本：2018.4.0

项目文件为 unitypackage 文件包：

下载导入 Unity 即可使用

提取码：z57o

---

支持

May Be —— 开发者，总有一天要做的事！

拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程 使有限时间 具备无限可能！

---

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)

Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

---

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址