unity Button按钮点击时改变按钮图片样式

ゝ一世哀愁。 2023-09-27 09:36 2阅读 0赞

### 三种改变按钮图片的方法 ###

按钮原来是

![7ee9b9b307cc480998d8287a72fa1ce3.png][]

点击的时候，希望它变成

![36c07f0f79e2449d9e3b1f78701964b2.png][]

这里也可以变成其他图片，不光是改变颜色

### 一、点击时改变图片（点击其他物体时会改回去） ###

添加Button后，改变设置

![5bb633f2aa304af0976e53d650712540.png][]

我们要把这个红色的改成 SpriteSwap

![e944ea598d924696873c9c682b103230.png][]

把自己喜欢的图片拖到红色箭头指的那一行，拖进去之后，你点击按钮的时候会直接改变按钮图片样式哦~~~

其他的地方，你们也可以自己拖图片试一下，总之就是不同情况下改变图片

### 二、点击后永久改变图片样式（这个永久指的你不自己改回来） ###

这个是评论区有问，所以加的。

#### 1.先做一个按钮 ####

![f558fbf0c102466d8f6b1fa54f17175f.png][]![63b9f9d651c640eb93d50281348cda17.png][]

![3a674df735ba454091430061fa68e722.png][]

#### 2.准备一个你想换的图片，并把它改成精灵模式 ####

![49fe6015e21641dd9144245292678965.png][]

#### 3.开始写代码 ####

先把刚刚准备好要替换的图片放到代码里。

[SerializeField] Sprite sprite;

![57cf2125b37a455bad70fbdf83793b0f.png][]

把按钮也加在这个代码里。

[SerializeField] Sprite sprite;
        [SerializeField] Transform button0;

![3434dc80e83f4d00a6af1bab19fc93e3.png][]

现在要添加代码，当点击按钮的时候，把按钮的图片换成图片1。

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class ChangeButton : MonoBehaviour
    {
        [SerializeField] Sprite sprite;
        //注意这里我声明的是Transform
        [SerializeField] Transform button0;
        
        void Start()
        {
            //我需要在Button组件里面加，所以用GetComponent<Button>()
            //当点击时（onClick）
            //因为我一直要看着，有没有点击，所以加方法叫，监听时（AddListener）
            //最后加入方法ButtonDown
            button0.GetComponent<Button>().onClick.AddListener(ButtonDown);
        }
    
        void ButtonDown() {
            //我需要改的是图片，所以我需要先获取组件Image，所以用GetComponent<Image>()
            //我需要Image组件里的图片，所以用sprite
            //等号后面的sprite是我第一行加的图片1
            button0.GetComponent<Image>().sprite = sprite;
        }
    }

#### 4.成果展示 ####

![6f1431dae8b9414c84b58a9cc4ac4626.gif][]

### 三、点击改变图片样式，再点一下改回来 ###

这个是评论区又有问，所以加的。

逻辑梳理：我建两个按钮AB，B把A盖住。

B平时是隐藏的，点击A，显示B。

（这时候B出现了，刚好A被遮住，你只能点到B）

那么点击B，B自己消失，就又只能看见A了

![67662489bb8a40c1baca397aa3a8ddbb.png][]

####  ####

#### **2.再做一个按钮，把这俩按钮搞的一样大（这步略）** ####

#### **3.把按钮2放到按钮1下方** ####

![8ca43ef0661d4a7db6ed984bd39c9351.png][]

这会图片会显示按钮2的图片，因为按钮1被遮住了

#### 4.把按钮2隐藏 ####

![a996e66828cf48c28352c12877a53749.png][]

5.给按钮加方法

给按钮1加的方法：点击按钮1，显示按钮2

给按钮2加的方法：点击按钮2，把按钮2关掉

按钮1的方法：

> ![9e7a786ca34b45dd88e3f106fb89abc3.png][]
> 
> ![0ecc508c8a9e4dc9a80756c7cb55ae96.png][]

按钮2的方法：

![2c89e90b739742b181907ea86b86ce6a.png][]

#### 5.成果展示 ####

![deb2863e364145bbb6729f8cd3191b6b.gif][]

[7ee9b9b307cc480998d8287a72fa1ce3.png]: https://img-blog.csdnimg.cn/7ee9b9b307cc480998d8287a72fa1ce3.png
[36c07f0f79e2449d9e3b1f78701964b2.png]: https://img-blog.csdnimg.cn/36c07f0f79e2449d9e3b1f78701964b2.png
[5bb633f2aa304af0976e53d650712540.png]: https://img-blog.csdnimg.cn/5bb633f2aa304af0976e53d650712540.png
[e944ea598d924696873c9c682b103230.png]: https://img-blog.csdnimg.cn/e944ea598d924696873c9c682b103230.png
[f558fbf0c102466d8f6b1fa54f17175f.png]: https://img-blog.csdnimg.cn/f558fbf0c102466d8f6b1fa54f17175f.png
[63b9f9d651c640eb93d50281348cda17.png]: https://img-blog.csdnimg.cn/63b9f9d651c640eb93d50281348cda17.png
[3a674df735ba454091430061fa68e722.png]: https://img-blog.csdnimg.cn/3a674df735ba454091430061fa68e722.png
[49fe6015e21641dd9144245292678965.png]: https://img-blog.csdnimg.cn/49fe6015e21641dd9144245292678965.png
[57cf2125b37a455bad70fbdf83793b0f.png]: https://img-blog.csdnimg.cn/57cf2125b37a455bad70fbdf83793b0f.png
[3434dc80e83f4d00a6af1bab19fc93e3.png]: https://img-blog.csdnimg.cn/3434dc80e83f4d00a6af1bab19fc93e3.png
[6f1431dae8b9414c84b58a9cc4ac4626.gif]: https://img-blog.csdnimg.cn/6f1431dae8b9414c84b58a9cc4ac4626.gif
[67662489bb8a40c1baca397aa3a8ddbb.png]: https://img-blog.csdnimg.cn/67662489bb8a40c1baca397aa3a8ddbb.png
[8ca43ef0661d4a7db6ed984bd39c9351.png]: https://img-blog.csdnimg.cn/8ca43ef0661d4a7db6ed984bd39c9351.png
[a996e66828cf48c28352c12877a53749.png]: https://img-blog.csdnimg.cn/a996e66828cf48c28352c12877a53749.png
[9e7a786ca34b45dd88e3f106fb89abc3.png]: https://img-blog.csdnimg.cn/9e7a786ca34b45dd88e3f106fb89abc3.png
[0ecc508c8a9e4dc9a80756c7cb55ae96.png]: https://img-blog.csdnimg.cn/0ecc508c8a9e4dc9a80756c7cb55ae96.png
[2c89e90b739742b181907ea86b86ce6a.png]: https://img-blog.csdnimg.cn/2c89e90b739742b181907ea86b86ce6a.png
[deb2863e364145bbb6729f8cd3191b6b.gif]: https://img-blog.csdnimg.cn/deb2863e364145bbb6729f8cd3191b6b.gif