【从0开始写Laya框架】1-一句代码解决Button单击和长按

笔者刚接触Laya，一边学一边写，决定自己写一个框架，持续更新，框架名字的话开头以笔者真名缩写命名，就叫做YrpFrameWork

---

1.创建Button

创建一个空项目，并创建一个Button，然后var的值赋值为"myBtn"，记住这个值，我们待会儿要用到它。

创建Button

2.绑定场景runtime

绑定runtime

---

3.实现单击方法

要实现一个Button的单击方法，其实有很多种,笔者自己挑了最常用的一种，如下

export default class MyScene extends Laya.Scene{
    static instance: MyScene;
    private btn:laya.ui.Button;

    constructor(){
        super();
        MyScene.instance = this;
       this.loadScene("StartScene.json");
    
        this.btn = this.scene.myBtn as laya.ui.Button;
        this.btn.on(Laya.Event.MOUSE_DOWN,this,this.onClick);

  }
    //单击方法
    public onClick():void{
        console.debug("---OnClick---");
    }
}

---

4.实现长按方法

//单击方法
public onClick():void{
    this.isLongPress = false;
    //设置定时器间隔 单位毫秒
    var delay:number = 2000;
    Laya.timer.once(delay,this,this.onLongPress);
    //鼠标抬起，取消定时器
    this.btn.on(Laya.Event.MOUSE_UP,this,this.onClear);
}
//长按方法
private onLongPress()
{
    this.isLongPress = true;
    console.debug("---OnLongPress---");
}
//移除定时器
private onClear()
{
    if(!this.isLongPress) console.debug("---OnClick---");
    Laya.timer.clear(this,this.onLongPress);
}

思路：
点击按钮->触发定时器
->通过是否调用长按方法来识别长按开关的打开
->如果调用了长按方法,无需操作/如果未调用长按方法，手指放开，调用单击方法
->移除定时器

5.代码整合

export module YrpFrameWork{
export class Button{
    private  static isLongPress:Boolean = false;
    private static longPressLister:Function = null;
    private static clickListener:Function = null;
    /**
     * 
     * @param _targetBtn 目标按钮
     * @param _clickListener 点击方法
     * @param _longPressListener 长按方法
     * @param _delay 定时器间隔
     * @param _isOnce 是否执行一次
     */
    public static on(_targetBtn:laya.ui.Button,_clickListener:Function,
        _longPressListener:Function = null,_delay:number = 2000,_isOnce = true)
    {
        this.longPressLister = _longPressListener;
        this.clickListener = _clickListener;
        //鼠标按下，启动定时器
        _targetBtn.on(Laya.Event.MOUSE_DOWN,this,()=>{
            this.isLongPress = false;
            if(_isOnce)
            {
                _longPressListener && Laya.timer.once(_delay,this,this.onLongPress);
            }
            else{
                _longPressListener && Laya.timer.loop(_delay,this,this.onLongPress);
            }
            //鼠标抬起，取消定时器
            _targetBtn.on(Laya.Event.MOUSE_UP,this,this.onMouseUp);

        })  
    }

    private static onMouseUp():void{
        if(!this.isLongPress) this.clickListener();
        this.longPressLister && Laya.timer.clear(this,this.onLongPress);       
    }
    private static onLongPress():void{
        this.isLongPress = true
        this.longPressLister();

    }
}
}

最后我们调用我们的YrpFrameWork框架试试效果

大功告成，一句代码完成Button单击和长按的调用