button按钮的属性设置_Egret引擎基础教程 V（eui.Button常用按钮）

先来看一下官网的API：http://developer.egret.com/cn/apidoc/index/name/eui.Button

看过之后你会发现里面好像并没有介绍什么太多内容。说白了其实就两个公共属性icon，lable外加一堆事件。我们先来说下两个公共属性，然后再去扩展一下。

先来说一下Lable：要在按钮上显示的文本

我们在exml里面创建的按钮：主要注意一下标红的位置。

https://www.zhihu.com/video/1142096525386674176

代码注释很详细了，通过ID来获得想要改变的按钮，然后更改lable“kaishi”为“开始”。

看一下效果：

https://www.zhihu.com/video/1142099396345942016

这个很简单没有什么好说的，而且用的不是很多。多数情况下都是美术将图片和文字合为一体了。我说的是多数情况下，也有个别例外，不要纠结字眼。

现在我们来说一下icon：要在按钮上显示的图标数据。

官方API里面并没有告诉我们怎么使用icon去更改图片。我们来看看代码：

看看效果改变了没有：

https://www.zhihu.com/video/1142104138694410240

看到的效果是并没有变化，这是为什么？我们首先想到的是没有找到资源，或者资源路径不对，你是不是也是这样考虑的。那让我们来看一下资源。

this.button.icon = RES.getRes("egret_icon_png");

这是不是代码不对啊，以前加载资源的时候不都是以“.png”结束吗。这里资源的名字是不是不对啊？在这里我要说一下资源的名字是对的，为什么要这么写我们来看一下：

资源是在default.res.json文件里面，这个之前有讲过，你可以翻看第一篇就知道了。

既然是名称和路径都没有问题，那会是什么问题呢？

答案即将揭晓，我们先来看两张图片：

根据这两张图我们可以猜想，按钮的三种状态都设置了图片资源，在去单独改变icon就没有起到作用的。会不会是父与子的关系，难道说三种状态的图片资源会覆盖了icon的资源或者两者直接有什么相互干扰。我们来大胆的尝试一下，把三种状态的资源去掉，在去改变icon看看会不会起到作用。

我们将三种状态资源去掉了，在来看看结果：

https://www.zhihu.com/video/1142108402774962176

代码并没有改变，还是这一句。this.button.icon = RES.getRes("egret_icon_png");

只是将exml里面按钮的三种状态资源删掉了就可以了，那这是不是就证明了我们猜想的是对的。

看效果按钮背后有一张蓝色的背景图，这个先不用管它。

有人会说这并不是我想要的效果，我想的效果是将按钮三个状态都换掉，这才是我想要的。

那们我来继续看下面代码：

上面代码虽说有注释，但是看不太懂是吧。一会我带大家一起去看API。我们先来看效果；

https://www.zhihu.com/video/1142117241964298240

效果已经达到了我们想要的。

我们先来解释一下第一局代码，随便看一下效果。有的人会说不是三种状态吗，正常、按下、禁用。没有看出来效果啊，我们来改动一下代码更直观的看一下啊。

我们来改一下第一句：var image: eui.Image = <eui.Image>this.button.getChildAt(0);

改成真个样子：var image: eui.Image = <eui.Image>this.button.getChildAt(1);

看一下效果：

https://www.zhihu.com/video/1142118315974565888

这样是不是就非常的明显了。

var image: eui.Image = <eui.Image>this.button.getChildAt(0);

var image: eui.Image = <eui.Image>this.button.getChildAt(1);

以上两句代码的不同在结合效果，应该不难理解了吧。分别获取不同状态，去改变资源。

我们去看一下关键的这两句代码：

var property: eui.SetProperty =<eui.SetProperty> this.button.skin.states[1].overrides[0];

property.value = image.source;

虽然都有注释，但还不是很了解，这样我们去看一下官网的API。

首先是：eui.SetProperty

eui SetProperty API​developer.egret.com

在看一下这句：eui.skin (this.button.skin)

eui Skin API​developer.egret.com

然后是eui.states：

eui State API​developer.egret.com

var property: eui.SetProperty =<eui.SetProperty> this.button.skin.states[1].overrides[0];

property.value = image.source;

这两句以上就都有介绍了，不要光看截图啊，要点击下面的连接进去看看，里面内容还是比较多的。

下面我们在去给这个按钮关联一个事件：

代码注释很详细了，不多说，看效果：

https://www.zhihu.com/video/1142124025236131840

之前说过按钮的标签很少会手动去改变，一般都是美术把标签和图片合在一起了，之所以做了一个点击按钮更换“开始”“暂停”这个功能。说明还是可以去手动做一些lable的操作的。

按钮的注册类型会有好多，如图下：

eui Button API​developer.egret.com

欢迎大家关注、点赞、提意见。我会虚心接受，努力提升自己的文字表述能力，思维逻辑能力。

下一章节我们就可以点击按钮，进入游戏页面了。然后开始做游戏了。

那就让我们一起做一个小游戏来练练手吧！