3.Panel and Button
3.1 Panel
Panel（面板）本质上就是预先设置好的 Image。可以作为其他 UI 元素的父级。
在层级窗口右击选择 UI -> Panel 即可创建。
如下图所示：
3.2 Button
在层级窗口中右击选择 UI -> Button 即可创建。
Button 元素是由 Image组件、Button组件及其显示文本的 Text 组件构成的。
如下图所示：
Button组件的变量：
包括：Interactable 开关区、Transition 过渡区、Navigation 导航区、监听区四个部分，其中前 3 个区域继承了 Selectable 类，Selectable 组件包括除监听区以外的其他 3 个区域，如果给 Image组件添加 Selectable 组件，就可以形成一个没有监听区的 Button 按钮。
3.2.1 Interactable
用于设置是否可以互动。，不勾选的情况下，该按钮呈不可用状态。
3.2.2 Transition
互动类 UI 元素的 Transition （过渡方式）包括：
- Color Tint （颜色过渡）
- Sprite Swap （图像变换）
- Animation （动画过渡）
每种过渡方式的过渡状态包括：
- Normal（正常）
- Highlighted（悬停）
- Pressed（按下）
- Selected（选中）
- Disabled（不可用）
1.Color Tint （颜色过渡）
Color Multiplier（颜色倍数）设置颜色的倍增
Fade Duration（阴影持续时间）设置过渡时间（秒）
2.Sprite Swap （图像变换）
设置不同状态下的图像即可。
3.Animation （动画过渡）
操作步骤：
（1）选择 Button 组件过渡区的 Auto Generate Animation（生成动画）按钮，然后输入名称，自动生成一个 Animator 组件，可以通过 Inspector 面板看到 Button 组件中增加的 Animator 组件，同时，在 Project 面板中也会自动生成动画状态机图标。
只有通过 Auto Generate Animation 按钮生成的动画才会自带动画过渡的 5 种状态。
（2）双击动画状态机图标，打开动画状态机。
（3）选择菜单 Windows -> Animation -> Animation，打开 Animation 面板。
Animation 与 Animator 的区别：Animator 是动画系统面板，用于处理多个动画之间的过渡；Animation 面板是录制具体某个动画关键帧的面板。
（4）在 Animation 面板的左侧 Preview 下面可以通过下拉列表选择每个状态，选择状态后，单击红色点录制动画，录制完毕单击红色点关闭。
3.2.3 Navigation
Navigation 是键盘或者控制器决定以什么顺序选择 UI 元素的控制机制。Navigation 的 6 中模式：
None - 不设置导航
Everything - 全部，勾选后下面的 4 种模式全选
Horizontal - 水平方向，选择键盘或控制器的左右键时，选择所按键方向的下一个 UI 元素，忽略上下键
Vertical - 垂直方向，选择键盘或控制器的上下键时，选择所按键方向的下一个 UI 元素，忽略左右键
Automatic - 自动，选择上下左右键时，选择所按键方向的下一个最合适的 UI 元素
Explicit - 明确，设置上下左右键按键方向的下一个选择的 UI 元素
3.2.4 监听区
监听区可以执行预先设置好的指令，从而使 UI 元素具有一定的功能。Button 元素的监听区为 On Click，也就是单击鼠标时的监听。监听模式包括：
- Off - 不监听
- Editor And Runtime - 编辑和运行时都监听
- Runtime Only - 只在运行时监听
单击监听区的 “+” 按钮会自动添加一个事件。一个监听区可以设置多个监听事件，运行时按住从上到下的顺序来执行。
1.设置监听区实现功能
示例：通过点击按钮让 3D 物体 Cube 换一种材质。
在 Button 的监听区添加事件，将 Cube 拖拽到监听区，在 Function 下拉列表中选择 Mesh Renderer 组件中的变量 Meterial，并设置一个材质，如下图所示：
2.设置 Button 组件的脚本
在 Project 窗口中右击选择 Create -> C# Script，命名为 ButtonClick，双击脚本并编写代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonClick : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
public void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
}将 Project 窗口中的 ButtonClick 脚本拖入到 Button 的 Inspector 面板中使其成为组件。
在 Button 的监听区设置：将 Button 拖拽到监听区，选择脚本中的方法。如下图所示：
3.通过挂载脚本实现功能
创建脚本并编写代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonClick : MonoBehaviour
{
private Button button;
// Start is called before the first frame update
void Start()
{
button = GetComponent<Button>();
button.onClick.AddListener(OnButtonClick);
}
// Update is called once per frame
void Update()
{
}
void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
}上面的代码中，在 Start 方法中获取按钮并为按钮添加事件，将脚本挂载到 Button 组件上即可。