完成圖：
一、創建按鈕的ItemRenderer皮膚
1.根據設計圖設置好舞台大小，添加一個image圖片控件和一個label文本控件 並設置id
2.設置label居中（約束）
皮膚源碼內屬性為 verticalCenter="0" （垂直中心=0）horizontalCenter="0" （水平中心=0）
3.創建彈起和按下狀態
4.分別在兩個狀態下設置對應圖片和文本設置 或 在源碼中進行操作
通過“屬性名.狀態名稱”設置不同狀態的圖片 如上 source.up設置彈起狀態圖片 source.down設置按下狀態圖片 並根據需要設置九宮格 scale9Grid
跟上面同理通過 “屬性名.狀態名稱” 的方法設置 textColor.up設置彈起狀態的文本顏色 textColor.down設置按下狀態的文本顏色 設置文本內容為｛data.text｝
5.在皮膚對應ts文件中定義繼承於eui.ItemRenderer 據說不用創建ts文件也可以
二、顯示在主界面上
1.在主界面的皮膚里創建一個Group放在要放的位置，在皮膚源碼里把List寫進這個Group中 並給List設置皮膚
再List里添加屬性itemRenderer來設置List需要顯示的皮膚 如上填寫為ui.ill.illustratedSelectItemRenderer 其中ui.ill為namespace 后面為皮膚class類名 高度不設置讓它根據內容撐開
由List包含的layout來包含設置的布局屬性 如上為水平布局 間隙為4 也就是4個平均分布 如以下圖內設置
2.定義與設置用來顯示itemRender皮膚的List數據源
定義參數 let list = [｛text："全部"｝，｛text："坦克"｝，｛text："輸出"｝，｛text："輔助"｝] 其中一個鍵值對 對應一個ItemRenderer皮膚用來顯示在List中
最后給該List的dataProvider(數據源) 實例化一個用來裝數據源的數據集合 eui.ArrayCollection(list) 傳入上面定義的數據源list給ArrayCollection 這樣在最終的List中就會顯示出4個按鈕而完成該按鈕菜單欄
用List的selectedIndex來設置List的默認選中項 如上圖設置為第一個也就是下標為0的項為默認選中