Unity 组件之Button组件和脚本的最详细用法

往往基础的东西反而暗藏玄机。

今天我们来全面讲一下Unity基础组件之一的Button。前面介绍的可能大家都知道，但是后面介绍的大家不一定清楚，但是十分实用的方法；

在Hierarchy 上右键创建两个Button, 生成如下

创建Button ,物体上默认挂载Image（后续单独讲） 和 Button组件，我们看Button组件

Interactable : 决定按钮是否禁用，勾选则启用，不勾选则禁用无法背点击

Transition:  这里有四种选项：分别为None , Color Tint , Sprite Swap ，Animation .

None, 按扭不受任何交互影响

Color Tint :按钮根据不同的交互显示不同的颜色，这里我们先设置下Button1的颜色交互信息

Normal Color : 按钮正常情况下，在开始运行时或不被选中时的颜色。这里我们默认是白色，也等于按钮刚创建时的颜色

Highlighted Color : 当运行时鼠标尖尖停留在按钮范围内时的颜色

Pressed Color : 当运行时鼠标按住按钮时的颜色

Selected Color : 这个经常玩PS5的同学就知道，PS5的软件打开后会默认选中一个按钮，然后我们通过手柄上下左右来选择按钮。当我们点击一个按钮然后松开后，这个按钮就是被选中状态，根据上面的设置运行时点一下按钮后按钮应该显示蓝色

我们可以通过键盘上的上下左右键来选中其它的按钮，这里我点下键，蓝色就会跳到下面，下面的按钮被选中，这个功能在我们给软件做手柄适配时能用上

Disabled Color :当Button组件的Interactable 选项取消勾选时产生反应，哪怕我们的按钮处于上面的选中状态，也会立刻变成对应的颜色。

Color Multiplier : 所有显示的颜色以及透明度（RGBA）乘以这个倍数，这个倍数由1-5的小数范围，我们设置鼠标悬浮在上面时的颜色

我们把Color Multiplier设置为1

当鼠标悬浮在按钮上时，Highlighted Color 按钮的颜色

我们把Color Multiplier设置为2

当鼠标悬浮在按钮上时，Highlighted Color 按钮的颜色

可以看到不仅颜色被乘以了2倍，就连透明度也乘以了2倍

Target Graphic :颜色改变的目标，如果选择Button2 ,则对Button1 做的任何点击等一系列交互导致产生的颜色改变会发生在Button2 身上，否则是发生在自己Button1身上。如下鼠标悬浮在Button1.

FadeDuration :  颜色转变所花费的时间，时间长的话有一个过渡的效果

这里我们有一点要注意，就是按钮显示的颜色，和按钮物体身上挂载的Image上的Color 是相乘的关系。如果Image上的Color为黑色RGBA（0,0,0,1）,则任何按钮交互改变的颜色都为最终显示黑色，因为任何颜色值乘以0都是0.

接下来我们介绍下Sprite Swap 选项：

先设置下组件内的数据：我们用了4张Sprite

Highlighted Sprite : 鼠标悬浮在按钮上面时显示的图片。这里我们设置为绿色草皮图片

Pressed Sprite：鼠标按住按钮时显示的图片。

Selected Sprite:按钮被点击一下后处于选中状态时显示的图片，同上Color

Disabled Sprite : Button组件的Interactable 取消勾选（禁用）时显示的图片

Target Graphic :图片改变的目标，如果选择Button2 ,则对Button1 做的任何点击等一系列交互导致产生的图片改变会发生在Button2 身上，否则是发生在自己Button1身上。如下鼠标悬浮在Button1.

要注意的是，对于Image上的图片，只有当按钮状态为初始状态或未被选中时才会显示该图片

接着我们来说说Animation 选项：

我们对Button1点击Auto Generate Animation: 生成上面五种状态时的动画

左边生成五种动画触发器，中间生成五个动画片段并连接好线。意味着当对按钮的交互会触发其中一种动画状态，并播放相应的动画片段。

接下来我们自己手K动画，这里我做了五组动画

按钮Normal Trigger 初始状态时：Scale大小设为默认值

按钮Highlighted Trigger鼠标悬浮状态时：按钮Scale变长

按钮Pressed Trigger鼠标按住状态时：按钮Scale变短

按钮Selected Trigger选中状态时：按钮Scale变宽

按钮Disabled Trigger禁用状态(Interactable 取消勾选)时：按钮Scale变窄

接下来是运行时测试, 真实运行时，按钮是循环播放形变动画

NormalTrigger:

Highlighted Trigger:

Pressed Trigger:

Selected Trigger:

Disabled Trigger :

接下来要说的就是按钮的Navigation , 首先我们需要知道一个按钮有上下左右四个方向，然后我们回到上面说的PS5案例，当你选中一个按钮时，你按手柄的上下左右四个键，分别跳到其它四个按钮上，而Navigation导航就是决定你按下方向键时要跳转的按钮是哪个。

Navigation 有6个选项，

None:  不对按钮进行导航，也就是当前选中的按钮，按下键盘或手柄的上下左右键不会跳到其它按钮。

Everything:  四个方向分别能跳转到按钮（前提是距离满足条件，且存在按钮）

Horizontal:  只做水平方向上的导航，也就是只能按左右键跳水平方向上的按钮。

这里有个Wrap Around 整体环绕：

当Wrap Around选项关闭时，我把Button1从中间拖到最右边，Button1只有左边才存在导航

当Wrap Around选项开启时，我把Button1从中间拖到最右边，Button1的右边会环绕一圈，连接到最左边的按钮，这个在做循环选中时非常有用，就是你一直按右，到达最右边按钮时，会立马跳回最左边的按钮，

Vertical : 垂直方向上的按钮导航，只能上下跳动按钮

Wrap Around同水平方向原理一样，可以循环

Automatic:  自动导航，这个是根据按钮周围的按钮分布来自动识别上下左右该跳到哪个按钮：

Explicit: 这个按钮是自定义点击上下左右要跳到哪个按钮上，这里我们把Button1 左右导航，上下导航颠倒，会发现他的导航线弯曲颠倒

Visualize  是导航线显示开关，选中时开启，不选中时则关闭导航线

另外，对于一个按钮下有两个按钮，导航线会智能的取其中一个按钮作为自己该方向上跳入的按钮。

接下来我们来讲讲点击按钮OnClick事件部分：

点加号添加点击事件，这里可以添加多个

这里Object 可以拖动两个地方的物体到这里面，分别是Hierarchy 面板里的物体以及Project里的资源物体

这里我们先在Hierarchy面板里面创建一个空物体，然后添加一个带测试方法的测试脚本：

public class TestObjectClass : MonoBehaviour{ // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { } public void TestObjectFunction() { Debug.Log("点击这个测试方法"); }}

我们把TestObject拖到Button1的OnClick中

会发现除了GameObject 和Transform外我们可以获取该物体身上的方法，也就意味着当我们按下Button按钮时，可以调用TestObjectFunction方法，前提是方法为Public。当然我们也可以在GameObject那一栏中去设置物体的显示隐藏，甚至更多可选的功能都会在选项中显示。

接下来我们介绍下Project部分资源弄到OnClick的用法

这里我们发现它有Texture2D类别选项，这里我们选择name 属性

这里我们运行点击Button1

分别打印日志，OnClick上的图片已经被改了名字，但是Project上的名字并没有被改变，另外OnClick上的图片依旧指向Project下的图片。

可以看到，资源本身名字没有改变，但是它在Unity上的名称已经被改变了

OK ，Button组件方法已经全部介绍都在这了，非常详细。

下面是Button类变量和方法的使用，这里我们事先安排好一个挂载了Animator 和Button组件的物体，下面的button指的Button组件

button.interactable = true; // 开启或禁用按钮，禁用后不能点击

//设置Button组件的点击状态下的需要播放的动画名button.animationTriggers.normalTrigger = "Highlighted";

//让Button播放鼠标悬浮时的高亮动画，这里有一个要注意的点，//就是Button组件里的Transition不能设为Animation, //因为按钮的交互动画现在是根据鼠标对按钮的交互来设置的，初始状态为Normal Trigger//会替代掉你代码里想播放的动画button.animator.Play("Highlighted");

//关闭Button组件button.enabled = false;

//通过组件获取自身Transform和gameObjectDebug.Log(button.transform);Debug.Log(button.gameObject);

//把渲染的目标设置为空，也可以设置为其他目标 button.image = null;

//返回物体是否隐藏或者组件被取消勾选Debug.Log(button.IsActive());

//返回物体是否显示并且勾选Debug.Log(button.isActiveAndEnabled);

//组件是否被禁用Debug.Log(button.IsInteractable());

//组件所挂载物体的名字Debug.Log(button.name);

//获取Explicit模式下手动选择上下左右的物体的名称Debug.Log(button.navigation.selectOnUp);Debug.Log(button.navigation.selectOnDown);

//让按钮处于被选中状态，在PS5设定初始的按钮时用到button.Select();

//获取Transition状态下，按钮交互设定的图片Debug.Log(button.spriteState.selectedSprite);

//获取按钮渲染的目标 Debug.Log(button.targetGraphic);

//获取按钮交互选项Debug.Log(button.transition);

//给按钮添加点击事件button.onClick.AddListener(() =>{ Debug.Log("按钮点击事件");});button.onClick.AddListener(BtnClickFunc);

关于Button的介绍到这结束，说个悲伤的事，其实在最初，我把Button所有能点出来的方法或者变量都去摸了一遍，但就在我实践时，发现很多方法虽然存在但并不能用组件去调用，这些方法大部分都是继承而来的，和Button关系并不大，属于基类的方法，这也是我在十几次Unity崩溃后决定说出来的。好了，到此结束，下篇Image