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


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

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

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

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

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

    测试用素材

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

    /**
     * 三种状态切换按钮
     * @author chenkai 2018/8/8
     */
    class ThreeButton extends eui.Button{
    	public brower:string = "up";           //浏览后打开
    	public invite:string = "down";         //邀请后打开
    	public opened:string = "disabled";     //已打开
    
    	public constructor() {
    		super();
    	}
    
    	protected childrenCreated(){
    		//默认状态
    		this.currentState = this.brower;
    	}
    
    	/**
    	 * 改变状态
    	 * @param state 状态 
    	 */
    	public changeState(state:string){
    		this.currentState = state;
    	}
    }

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

    三、实际使用

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

     

     代码中使用

    class HomeScene extends eui.Component{
    	private btn:ThreeButton;
    
    	public constructor() {
    		super();
    		this.skinName = "HomeSceneSkin";
    	}
    
    	protected childrenCreated(){
    		
    		this.btn.changeState(this.btn.brower); //切换到 浏览后打开
    		this.btn.changeState(this.btn.invite); //切换到 邀请后打开
    		this.btn.changeState(this.btn.opened); //切换到 打开
    
    		this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
    			console.log("click");
    		},this);
    	}
    
    }
    

      

     四、思考

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

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

  • 相关阅读:
    maven基本配置
    spring mvc统一异常处理
    HBase介绍
    在 Windows 上安装 Hadoop 教程(转)
    Xshell利用登录脚本从服务器登录到另外一个服务器
    Windows平台下安装Eclipse插件,开发Hadoop应用
    如何编译Apache Hadoop2.2.0源代码
    oracle表空间表分区详解及oracle表分区查询使用方法(转+整理)
    javadoc相关问题
    Linux压缩与解压常用命令
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9442379.html
Copyright © 2020-2023  润新知