Unity之UGUI Button按钮组件详细使用教程

1、Button组件在Inspector面板如何使用

Button组件有5种交互状态：

Normal：按钮处于默认、未被交互的状态
Highlighted：鼠标悬停在按钮上、使用键盘/手柄导航时选中按钮
Pressed：鼠标在按钮上按下（未释放）、触摸屏触摸按钮、对应按键被按下（如手柄确认键）
Selected：使用键盘/手柄导航时离开，但按钮仍保持选中
Disabled：禁用状态，按钮的interactable属性设置为false

Button组件在不同状态下的外观可以通过修改颜色、图像等属性来改变。

1.1通过颜色改变Button组件外观

Transition选择Color Tint类型，下面是Color Tint模式参数详解

Target Graphic：目标图形

指定哪个UI元素应用颜色变化

cs 复制代码

// 为图像设置颜色
button.targetGraphic = buttonImage;

Normal Color：正常颜色

cs 复制代码

// 设置专业UI配色方案
ColorBlock colors = new ColorBlock();
colors.normalColor = new Color32(50, 50, 50, 255);    // 深灰色
// 或者使用十六进制
colors.normalColor = HexToColor("#323232");

Highlighted Color：高亮颜色

触发时机：鼠标悬停或导航选中时

cs 复制代码

colors.highlightedColor = new Color32(80, 80, 80, 255);  // 稍亮的灰色

Pressed Color：按下颜色

触发时机：按钮被按下但未释

cs 复制代码

colors.pressedColor = new Color32(30, 30, 30, 255);  // 更暗的灰色
// 或添加透明度变化
colors.pressedColor = new Color(0.2f, 0.2f, 0.2f, 0.9f);

Selected Color：选中颜色

触发时机：通过代码选中或导航系统保持选中时

cs 复制代码

colors.selectedColor = new Color32(0, 120, 215, 255);  // Unity蓝色
// 或使用系统强调色
colors.selectedColor = Color.blue * 0.8f;

Disabled Color：禁用颜色

触发时机 ：interactable = false时

cs 复制代码

colors.disabledColor = new Color32(100, 100, 100, 128);  // 50%透明度的灰色

Color Multiplier：颜色倍增器

作用：所有状态颜色的亮度倍增系数

cs 复制代码

// 增强颜色对比度
colors.colorMultiplier = 2.0f;
// 配合HDR效果
colors.colorMultiplier = 4.0f;  // 用于发光按钮

Fade Duration：淡入淡出持续时间

状态切换的动画时间（秒）

cs 复制代码

colors.fadeDuration = 0.15f;  // 150毫秒，舒适的过渡

1.2通过图像改变Button组件外观

Target Graphic：目标图形，指定哪个Image组件进行Sprite切换
Highlighted Sprite：高亮状态精灵
Pressed Sprite：按下状态精灵
Selected Sprite：选中状态精灵
Disabled Sprite：禁用状态精灵

1.3通过Button组件绑定交互事件

OnClick() 是Unity Button组件的核心交互功能，用于定义按钮被点击时执行的操作。这是一个UnityEvent，可以通过可视化编辑器或代码进行配置。

操作步骤如下，在Inspector面板中：

点击 "+" 添加事件监听
拖拽游戏对象到Object字段
选择目标组件和方法

2、Button组件在代码中如何使用

Button组件基本使用逻辑就是，获取到Button组件，将其绑定到要监听的函数就完成了

cs 复制代码

public Button btn;

private void Start()
{
    btn = GetComponent<Button>();
    // 监听无参数函数 常用
    btn.onClick.AddListener(OnClickBtn);
    // 委托监听
    btn.onClick.AddListener(delegate () 
    {
        OnClickBtn("Button");
    });
    // Lambda形式  常用
    btn.onClick.AddListener(() =>
    {
        OnClickBtn("Button");
    });
}

public void OnClickBtn()
{
    Debug.Log("点击按钮响应...");
}
public void OnClickBtn(string str)
{
    Debug.Log("点击按钮，带参响应，参数是" + str);
}

// 在适当的时候移除监听（避免内存泄漏）
void OnDestroy()
{
    if (btn != null)
    {
        btn.onClick.RemoveListener(OnClickBtn);
        // 对于 委托监听，Lambda，需要保存引用才能移除
    }
}

对于委托监听，Lambda，需要保存引用才能移除，是因为他们都是一次性创建的，没有变量引用，所以无法直接移除，下面是保存引用才移除的示例：

Lambda移除监听

cs 复制代码

    private Button btn;
    // 关键：保存Lambda的引用
    private UnityAction savedAction;
    
    void Start()
    {
        btn = GetComponent<Button>();
        
        // 保存Lambda到变量
        savedAction = () => {
            Debug.Log("按钮被点击");
            // 具体操作...
        };
        
        // 添加监听
        btn.onClick.AddListener(savedAction);
    }
    
    void OnDestroy()
    {
        if (btn != null)
        {
            // 现在可以用变量引用移除
            btn.onClick.RemoveListener(savedAction);
        }
    }

委托移除监听

cs 复制代码

private UnityAction savedDelegate;
void Start()
{
    // 保存委托到变量
    savedDelegate = delegate () 
    {
        OnClickBtn("Button");
    };
    
    // 添加监听
    btn.onClick.AddListener(savedDelegate);
}

void OnDestroy()
{
    if (btn != null)
    {
        btn.onClick.RemoveListener(savedDelegate);
    }
}