Egret 中实现3种状态切换按钮

一、游戏中的常用3种状态按钮

Egret种提供了2种状态切换的按钮ToggleButton。

 但是在游戏中常用到3种状态的按钮，比如任务系统的领取、已领取、未领取。

比如下图中宝箱的打开、浏览后打开、邀请后打开

二、利用eui.Button来实现3种状态切换按钮

测试用素材

继承eui.Button，并实现3种状态切换按钮

1/**
2 * 三种状态切换按钮
3 * @author chenkai 2018/8/8
4 */
5class ThreeButton extends eui.Button{
6	public brower:string = "up";           //浏览后打开
7	public invite:string = "down";         //邀请后打开
8	public opened:string = "disabled";     //已打开
9
10	public constructor() {
11		super();
12	}
13
14	protected childrenCreated(){
15		//默认状态
16		this.currentState = this.brower;
17	}
18
19	/**
20	 * 改变状态
21	 * @param state 状态 
22	 */
23	public changeState(state:string){
24		this.currentState = state;
25	}
26}

这里的关键点是主动设置currentState属性后，按钮的点击处理中getCurrentState就会被忽略，意味着你点击这个Button后，它不会在弹起时显示up的图，在按下时显示down的图。

三、实际使用

 拖动一个ThreeButton到exml，并赋值3种状态的图

 代码中使用

1class HomeScene extends eui.Component{
2	private btn:ThreeButton;
3
4	public constructor() {
5		super();
6		this.skinName = "HomeSceneSkin";
7	}
8
9	protected childrenCreated(){
10		
11		this.btn.changeState(this.btn.brower); //切换到 浏览后打开
12		this.btn.changeState(this.btn.invite); //切换到 邀请后打开
13		this.btn.changeState(this.btn.opened); //切换到 打开
14
15		this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
16			console.log("click");
17		},this);
18	}
19
20}

 四、思考

1. 如果有四种，或更多种状态按钮，该如何实现。

    得额外写自定义组件，不能方便的继承eui.Button来实现了。