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 =
改成真個樣子：var image： eui。Image =
看一下效果：
https：//www。zhihu。com/video/1142118315974565888
這樣是不是就非常的明顯了。
var image： eui。Image =
var image： eui。Image =
以上兩句程式碼的不同在結合效果，應該不難理解了吧。分別獲取不同狀態，去改變資源。
我們去看一下關鍵的這兩句程式碼：
var property： eui。SetProperty =
property。value = image。source；
雖然都有註釋，但還不是很瞭解，這樣我們去看一下官網的API。
首先是：eui。SetProperty
eui SetProperty API
在看一下這句：eui。skin （this。button。skin）
eui Skin API
然後是eui。states：
eui State API
var property： eui。SetProperty =
property。value = image。source；
這兩句以上就都有介紹了，不要光看截圖啊，要點選下面的連線進去看看，裡面內容還是比較多的。
下面我們在去給這個按鈕關聯一個事件：
程式碼註釋很詳細了，不多說，看效果：
https：//www。zhihu。com/video/1142124025236131840
之前說過按鈕的標籤很少會手動去改變，一般都是美術把標籤和圖片合在一起了，之所以做了一個點選按鈕更換“開始”“暫停”這個功能。說明還是可以去手動做一些lable的操作的。
按鈕的註冊型別會有好多，如圖下：
eui Button API
歡迎大家關注、點贊、提意見。我會虛心接受，努力提升自己的文字表述能力，思維邏輯能力。
下一章節我們就可以點選按鈕，進入遊戲頁面了。然後開始做遊戲了。
那就讓我們一起做一個小遊戲來練練手吧！
