UG3L3——Button 按钮

Button

​Button​ 是按钮组件
是UGUI中用于处理玩家按钮相关交互的关键组件

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

  • 父对象 —— Button​ 组件依附于父对象 同时挂载了一个 Image​ 组件 作为按钮背景图
  • 子对象 —— 按钮文本（可选）

本章代码关键字

1
2
3
4
Button                                //按钮类
button.onClick.AddListener()          //向按钮添加监听函数
button.onClick.RemoveListener()       //移除按钮的指定监听函数
button.onClick.RemoveAllListeners()   //移除按钮的全部监听函数

Button 参数相关

​image​

  • Interactable：是否接受输入

  • Transition：响应用户输入的过渡效果

    • None：没有状态变化效果

    • ColorTint：用颜色表示不同状态的变化

      ​image​

      • TargetGraphic：控制的目标图形
      • Normal Color：正常状态颜色
      • Highlighted Color：鼠标进入时显示高亮颜色
      • Pressed Color：按下颜色
      • Selected Color：选中的颜色
      • Disabled Color：禁用时的颜色
      • Color Multiplier：颜色倍增器，过渡颜色乘以该值
      • FadeDuration：衰减持续时间，
        从一个状态进入另一个状态时需要的时间

    • Sprite Swap：用图片表示不同状态的变化

      ​image​

      • Highlighted Sprite：鼠标进入时图片
      • Pressed Sprite：按下时图片
      • Selected Color：选中时的颜色
      • Disabled Sprite：禁用时显示的图片

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

      需要一些Animation和Animator的知识

      ​image​

      • Normal Trigger：正常动画触发器
      • Highlighted Trigger：鼠标进入状态时触发器
      • Pressed Trigger：按下时触发器
      • Selected Trigger：选中时触发器
      • Disabled Trigger：禁用时触发器

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

    ​image​

    • None：无键盘导航
    • Horizontal：水平导航
    • Verticval：垂直导航
    • Automatic：自动导航
    • Explicit：指定周边控件进行导航

  • Visualize：可以在场景窗口看到导航连线

  • OnClick()：单击（按下再抬起）执行的函数列表

代码控制 Button

Button界面上显示的内容都可以得到并控制

1
2
3
Button btn = this.GetComponent<Button>();
btn.interactable = true;
btn.transition = Selectable.Transition.None;

若要修改Button的贴图，直接获取该按钮对象上的Image即可

1
Image img = this.GetComponent<Image>();

监听点击事件的两种方式

  1. 拖脚本

    首先在脚本内写好公共函数（非公共函数无法调用）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    using UnityEngine;
    using UnityEngine.UI;

    public class Lesson10 : MonoBehaviour
    {
        public void ClickBtn()
        {
            print("按钮点击");
        }

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

    然后在OnClick()列表内添加函数（按[+]），拖入Button对象，选择挂载在Button对象上的脚本中的函数

    ​​image

    如果有多个函数要调用，重复上述步骤即可

  2. 代码添加

    向Button内的onClick内使用方法来添加函数，移除函数，函数不限公共还是私有

    • 向OnClick添加函数

      1
      2
      3
      4
      5
      btn.onClick.AddListener(ClickBtn2);
      btn.onClick.AddListener(() =>
      {
          print("123123123");
      });

    • 向OnClick移除函数

      匿名函数不能通过这个方法移除，因为没有装载该函数的变量

      1
      btn.onClick.RemoveListener(ClickBtn2);

    • 向OnClick移除所有函数

      1
      btn.onClick.RemoveAllListeners();