【unity游戏开发入门到精通——UGUI】UI控件 —— Button按钮控件

本文链接：https://blog.csdn.net/qq_36303853/article/details/147350921

注意：考虑到UGUI的内容比较多，我将UGUI的内容分开，并全部整合放在【unity游戏开发——UGUI】专栏里，感兴趣的小伙伴可以前往逐一查看学习。

文章目录

一、Button是什么
二、Button按钮组件参数
三、Button按钮代码控制
四、Button按钮监听事件的两种方式
- 1、拖脚本监听点击事件
- 2、代码添加点击事件
专栏推荐
完结

一、Button是什么

Button是按钮组件，是UGUI中用于处理玩家按钮相关交互的关键组件。Button按钮组件也分两种：

旧按钮组件
在这里插入图片描述
新按钮组件

默认创建的Button由2个对象组成：

父对象——Button组件依附对象，同时挂载了一个Image组件，作为按钮背景图。
子对象——按钮文本（可选）。新旧Button按钮的唯一区别就是文本这个文本组件用的旧的Text文本还是新的TextMeshPro文本组件。

二、Button按钮组件参数

在这里插入图片描述

1、Interactable 能不能交互

是否接受点击响应输入。

2、Transition 过渡

响应用户输入的过渡效果。
在这里插入图片描述

2.1 None 无：没有状态变化效果，点击没有交互效果。

2.2 ColorTint 颜色色彩：用颜色表示不同状态的变化。

在这里插入图片描述

（1）TargetGraphic 目标图形

控制的目标图形，默认关联的是自己身上的Image组件，然后再对Image进行叠加操作。

（2）Normal Color 正常颜色

正常状态颜色。

（3）Highlighted Color 高亮颜色

鼠标进入时显示高亮颜色。

（4）Pressed Color 按下颜色。

（5）Selected Color 选中的颜色

上一次点击的按钮会作为焦点，进入选中状态，展示选中的颜色。

（6）Disabled Color 禁用时的颜色

Interactable不勾选时展示。

（7）Color Multiplier 色彩乘数

颜色倍增器，过渡颜色乘以该值，一般不改。

（8）FadeDuration 淡化持续时间

衰减持续时间，从一个状态进入另一个状态时需要的时间。

2.3 Sprite Swap Sprite 交换：用图片表示不同状态的变化。

在这里插入图片描述

（1）Highlighted Sprite：鼠标进入时图片。

（2）Pressed Sprite：按下时图片。

（3）Selected Color：选中时的颜色。

（4）Disabled Sprite：禁用时显示的图片。

2.4 Animation 动画：用动画表示不同状态的变化。

一般用于实现按钮操作同步触发一些动画效果。

点击AutoGenerateAnimation可以自动生成animator文件，并且给当前按钮添加animator组件。生成后Unity帮我自动设置了切换条件和Animation文件。
在这里插入图片描述
但是对于Animation文件的效果是空，要自己设置动画效果。

（1）Normal Trigger：正常动画触发器。

（2）Highlighted Trigger：鼠标进入状态时触发器。

（3）Pressed Trigger：按下时触发器。

（4）Selected Trigger：选中时触发器。

（5）Disabled Trigger：禁用时触发器。

3、Navigation 导航

导航模式，可以设置UI元素如何在播放模式中控制导航。

比如用于键盘手柄等按钮控制切换，可以修改按钮只能垂直或者竖直选择。
在这里插入图片描述

3.1 None：无键盘导航，按上下左右wasd都没用。

3.2 Everything：所有都能导航。

3.3 Horizontal：水平导航，按左右ad有用。

3.4 Vertical：垂直导航，按上下ws有用。

3.5 Automatic：自动导航，按上下左右wasd都有用。

3.6 Explicit：指定周边控件进行导航。

在这里插入图片描述
手动拖拽上下左右wasd切换到哪个控件。

4、Visualize 可视化按钮。

点击后可以在场景窗口看到导航连线。
在这里插入图片描述

三、Button按钮代码控制

得到Button组件

// 获取当前脚本所附加的 GameObject 上的 Button 组件
Button button = this.GetComponent<Button>();

设置交互状态 UGUI其他控件大多也有这个变量

// 设置 Button 组件的交互状态为可交互，即按钮可以与用户进行交互
button.interactable = true;

设置状态过渡效果

// 设置 Button 组件的状态过渡效果为 None，表示没有过渡效果
button.transition = Selectable.Transition.None;

设置Button上的图片

// 想要设置Button上的图片，一般都是获取当前脚本所附加的 GameObject 上的 Image 组件进行设置
Image image = this.GetComponent<Image>();

四、Button按钮监听事件的两种方式

点击事件是在按钮区域抬起按下一次，就算一次点击

1、拖脚本监听点击事件

比如书写一个脚本，编写一个测试方法

public void ClickBtn()
{
    print("按钮点击1");
}

点击Button组件下OnClick下面的添加按钮，可以选择关联对象，在选择关联对象上哪个脚本的哪个事件，进行点击事件的监听。只能关联功能函数。可以关联多个函数。
在这里插入图片描述

2、代码添加点击事件

添加点击事件监听

//声明点击按钮函数
private void ClickBtn2()
{
    print("按钮点击2");
}

// 添加 ClickBtn2 方法作为 button 的点击事件监听器，当 button 被点击时，会执行 ClickBtn2 方法
button.onClick.AddListener(ClickBtn2);

// 添加一个匿名函数作为 button 的点击事件监听器，当 button 被点击时，会执行其中的代码块
button.onClick.AddListener(() => {
    print("123123123");
});

移除点击事件监听

// 移除 ClickBtn2 方法作为 button 的点击事件监听器
button.onClick.RemoveListener(ClickBtn2);

移除所有点击事件监听

// 移除所有的点击事件监听器，即移除 button 上绑定的所有方法
button.onClick.RemoveAllListeners();

专栏推荐

地址
【unity游戏开发入门到精通——C#篇】
【unity游戏开发入门到精通——unity通用篇】
【unity游戏开发入门到精通——unity3D篇】
【unity游戏开发入门到精通——unity2D篇】
【unity实战】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】
【unity游戏开发——模型篇】
【unity游戏开发——InputSystem】
【unity游戏开发——Animator动画】
【unity游戏开发——UGUI】
【unity游戏开发——联网篇】
【unity游戏开发——优化篇】
【unity游戏开发——shader篇】