Laya Dialog

参考UI--Dialog

1.通过设置zOrder属性，可以更改弹出的层次

2.dragArea用来指定对话框的拖拽区域。默认值为"0,0,0,0"(x,y,width,heith)

3.UIConfig里设置默认属性

/**弹出框背景颜色*/
public static var popupBgColor:String = "#000000";
/**弹出框背景透明度*/
public static var popupBgAlpha:Number = 0.5;
/**模式窗口点击边缘，是否关闭窗口，默认是关闭的*/
public static var closeDialogOnSide:Boolean = true;

这个closeDialogOnSide是全局设置，如果想单独设置某个Dialog怎么办呢？
观察一下DialogManager相关方法：

public function DialogManager() {
    this.mouseEnabled = maskLayer.mouseEnabled = true;
    this.zOrder = 1000;
    
    Laya.stage.addChild(this);
    Laya.stage.on(Event.RESIZE, this, _onResize);
    if (UIConfig.closeDialogOnSide) maskLayer.on("click", this, _closeOnSide);
    _onResize(null);
}

private function _closeOnSide():void {
    var dialog:Dialog = getChildAt(numChildren - 1) as Dialog;
    if (dialog is Dialog) dialog.close("side");
}

所以我们可以在自己的dialog中这样写：

close(type?: string, showEffect?: boolean): void {
    //side是DialogManager._closeOnSide点击遮罩触发的
    if (type != "side") {
        super.close(type, showEffect);
    }
}

4.打开方式

/**
 * 显示对话框（以非模式窗口方式显示）。
 * @param closeOther 是否关闭其它的对话框。若值为true则关闭其它对话框。
 * @param showEffect 是否显示弹出效果
 */
public function show(closeOther:Boolean = false, showEffect:Boolean = true):void {
    _open(false, closeOther, showEffect);
}

/**
 * 显示对话框（以模式窗口方式显示）。
 * @param closeOther 是否关闭其它的对话框。若值为true则关闭其它对话框。
 * @param showEffect 是否显示弹出效果
 */
public function popup(closeOther:Boolean = false, showEffect:Boolean = true):void {
    _open(true, closeOther, showEffect);
}

5.在1.7.5版本更新日志里，Dialog类增加popupEffect和closeEffect属性，可以修改每个对话框弹出和关闭效果

/**
 * 一个布尔值，指定对话框是否居中弹。
 * <p>如果值为true，则居中弹出，否则，则根据对象坐标显示，默认为true。</p>
 */
public var popupCenter:Boolean = true;
/**
 * 对话框被关闭时会触发的回调函数处理器。
 * <p>回调函数参数为用户点击的按钮名字name:String。</p>
 */
public var closeHandler:Handler;
/**
 * 弹出对话框效果，可以设置一个效果代替默认的弹出效果，如果不想有任何效果，可以赋值为null
 * 全局默认弹出效果可以通过manager.popupEffect修改
 */
public var popupEffect:Handler;
/**
 * 关闭对话框效果，可以设置一个效果代替默认的关闭效果，如果不想有任何效果，可以赋值为null
 * 全局默认关闭效果可以通过manager.closeEffect修改
 */
public var closeEffect:Handler;

在initialize方法中，设置了默认的弹出和关闭效果

/**@inheritDoc */
override protected function initialize():void {
    popupEffect = manager.popupEffectHandler;
    closeEffect = manager.closeEffectHandler;
    _dealDragArea();
    on(Event.CLICK, this, _onClick);
}

在DialogManager中

/**@private 全局默认弹出对话框效果，可以设置一个效果代替默认的弹出效果，如果不想有任何效果，可以赋值为null*/
public var popupEffect:Function = function(dialog:Sprite):void {
    dialog.scale(1, 1);
    Tween.from(dialog, {x: Laya.stage.width / 2, y: Laya.stage.height / 2, scaleX: 0, scaleY: 0},
    300, Ease.backOut, Handler.create(this, this.doOpen, [dialog]));
}

/**@private 全局默认关闭对话框效果，可以设置一个效果代替默认的关闭效果，如果不想有任何效果，可以赋值为null*/
public var closeEffect:Function = function(dialog:Sprite, type:String):void {
    Tween.to(dialog, {x: Laya.stage.width / 2, y: Laya.stage.height / 2, scaleX: 0, scaleY: 0},
    300, Ease.strongOut, Handler.create(this, this.doClose, [dialog, type]));
}

/**全局默认关闭对话框效果，可以设置一个效果代替默认的关闭效果，如果不想有任何效果，可以赋值为null*/
public var popupEffectHandler:Handler = new Handler(this, popupEffect);
/**全局默认弹出对话框效果，可以设置一个效果代替默认的弹出效果，如果不想有任何效果，可以赋值为null*/
public var closeEffectHandler:Handler = new Handler(this, closeEffect);

public function doOpen(dialog:Dialog):void {
    dialog.onOpened();
}
public function doClose(dialog:Dialog, type:String = null):void {
    dialog.removeSelf();
    dialog.isModal && _checkMask();
    dialog.closeHandler && dialog.closeHandler.runWith(type);
    dialog.onClosed(type);
}

这里可以看到dialog的onOpened,onClosed都是在动画完成后才执行的。我们可以参考DialogManager中的默认效果，来实现自己的自定义弹出关闭效果，比如渐入渐出

dialog.alpha = 0;
Tween.to(dialog,{alpha:1},300,null,Handler.create(Dialog.manager,Dialog.manager.doOpen,[dialog]));

dialog.alpha = 1;
Tween.to(dialog,{alpha:0},300,null,Handler.create(Dialog.manager,Dialog.manager.doClose,[dialog,type]));

6.有些dialog的数据，需要在打开后向后端请求。最好是在动画做完，也就是onOpened里去做。因为如果在做动画的过程中，后端数据返回导致dialog刷新，就会和动画同时进行，瞬间卡爆。