ArkTS鸿蒙制作自定义弹窗

一、弹窗的概念

        弹窗一般指打开应用时自动弹出或者用户行为操作时弹出的UI界面，用于短时间内展示用户需关注的信息或待处理的操作。

二、构建自定义弹窗

        1、在构建自定义弹窗时，需要创建自定义弹窗的控制器CustomDialogController，该控制器仅在作为@CustomDialog 和 @Component struct成员变量 ，且在@Component struct 内部定义时赋值才有效。

        2、自定义弹窗的构造器constructor,里面可以实现的接口参数有：

                builder: 自定义弹窗的内容构造器；

                cancel: 点击返回键、ESC键和点击遮罩层弹窗退出时触发的回调函数；

                autoCancel: 设置是否允许点击遮罩层（弹窗以外的区域）退出弹窗，true表示关闭弹窗，false表示不关闭弹窗；

                alignment: 弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default；

                offset: 弹窗相对alignment所在的位置偏移量。默认值：{ dx: 0, dy: 0 }；

                customStyle: 弹窗容器样式是否自定义。值为true表示弹窗容器样式不能自定义，值为false表示弹窗容器样式能自定义。

                gridCount: 弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。取值范围：大于等于0的整数;

                maskColor: 自定义蒙层颜色。默认值：0x33000000;

                maskRect: 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。默认值：{ x: 0, y: 0, width: '100%', height: '100%' };

                openAnimation: 自定义设置弹窗弹出的动画效果相关参数;

                closeAnimation: 自定义设置弹窗关闭的动画效果相关参数;

                showInSubWindow: 某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。值为true表示在子窗口显示弹窗。默认值：false，弹窗显示在应用内，而非独立子窗口；

                backgroundColor: 设置弹窗背板填充。默认值：Color.Transparent；

                cornerRadius：设置背板的圆角半径。可分别设置4个圆角的半径。默认值：{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }；

                isModal：弹窗是否为模态窗口。值为true表示为模态窗口且有蒙层，不可与弹窗周围其他控件进行交互，即蒙层区域无法事件透传。值为false表示为非模态窗口且无蒙层，可以与弹窗周围其他控件进行交互。默认值：true；

                onWillDismiss：交互式关闭回调函数；

                borderWidth：设置弹窗背板的边框宽度。可分别设置4个边框宽度。默认值：0。百分比参数方式：以父元素弹窗宽的百分比来设置弹窗的边框宽度。当弹窗左边框和右边框大于弹窗宽度，弹窗上边框和下边框大于弹窗高度，显示可能不符合预期；

                borderColor：设置弹窗背板的边框颜色。默认值：Color.Black如果使用borderColor属性，需要和borderWidth属性一起使用；

                borderStyle：设置弹窗背板的边框样式。默认值：BorderStyle.Solid如果使用borderStyle属性，需要和borderWidth属性一起使用；

                width：设置弹窗背板的宽度；

                height：设置弹窗背板的高度；

                shadow：设置弹窗背板的阴影；

                backgroundBlurStyle：弹窗背板模糊材质；

                keyboardAvoidMode：用于设置弹窗是否在拉起软键盘时进行自动避让。默认值：KeyboardAvoidMode.DEFAULT；

        3、说明：

                1.按下返回键和ESC键时会让弹窗退出；

                2.弹窗在避让软键盘时到达极限高度后会压缩高度。需要注意：高度压缩生效在外层容器上，如果容器根节点中的子组件设置了较大的固定高度，由于容器默认不裁剪，依然可能存在超出屏幕显示的情况。

                3.自定义弹窗仅适用于简单提示场景，不能替代页面使用。弹窗避让软键盘时，与软键盘之间存在16vp的安全间距。

                4.当前，ArkUI弹出框默认为非页面级弹出框。在页面路由跳转时，如果开发者未调用close方法将其关闭，弹出框将不会自动关闭。若需实现在跳转页面时覆盖弹出框的场景，可以使用组件导航子页面显示类型的弹窗类型或者页面级弹出框。

三、自定义弹窗的使用案例

        1、在弹窗中打开另一个弹窗：若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面

        创建第一层弹窗的内容：

        创建嵌套弹窗的内容：

        效果截图：

        

        2、使用@Link装饰器实现页面与弹窗内数据的双向绑定

                弹窗内容构建：

        效果截图：