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

Stella981
• 阅读 723

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

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

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

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

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

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

测试用素材

Egret 中实现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的图。

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

三、实际使用

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

 Egret 中实现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来实现了。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
Wesley13 Wesley13
3年前
4、jstack查看线程栈信息
1、介绍利用jps、top、jstack命令找到进程中耗时最大的线程,以及线程状态等等,同时最后还可以显示出死锁的线程查找:FoundoneJavaleveldeadlock即可1、jps获得进程号!(https://oscimg.oschina.net/oscnet/da00a309fa6
Wesley13 Wesley13
3年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Stella981 Stella981
3年前
Egret的按钮事件处理
首先要在exml内要设置有对应按钮的ID!(https://oscimg.oschina.net/oscnet/079d7f1add048600e12f2cff222cdb2fcf4.png)2,编写TypeScript脚本:publicmybutton:eui.Button;函数内部:this.mybutton
Wesley13 Wesley13
3年前
Unity横屏
Android下发现Unity里面的Player设置,并不能完全有效,比如打开了自动旋转,启动的时候还是会横屏,修改XML添加以下代码<applicationandroid:icon"@drawable/ic\_launcher"                    android:label"@string/app\_name"
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这