华为仓颉鸿蒙HarmonyOS NEXT仓颉原生CustomDialogController 自定义弹窗通过Custom

通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。

说明

自定义弹窗组件需要用@CustomDialog修饰，
@CustomDialog是一个具有限制的@Component，
@CustomDialog修饰的组件必须包含一个类型为Option<Customdialog>的
属性。这个属性会在使用到该弹窗的组件中被隐式地赋值。
混合页面场景下CustomDialog暂不支持设置动画属性。

构造函数

init(CustomDialogControllerOptions)

public init(options: CustomDialogControllerOptions)

自定义弹窗的所有参数，不支持动态刷新。

参数名	参数类型	必填	默认值	描述
options	CustomDialogControllerOptions	是	-	自定义弹窗设置的参数。

说明

构造的时候options参数需直接使用CustomDialogControllerOptions
构造函数，不能使用变量。

函数

close()

public func close()

关闭显示的自定义弹窗，若已关闭，则不生效。

open()

public func `open`()

显示自定义弹窗内容，允许多次使用，但如果弹框为SubWindow模式，则该弹框不允许再弹出SubWindow弹框。

setBuilder(()-> Unit)

public func setBuilder(builder: ()-> Unit)

设置一个构建器，用户无需主动调用，会在宏展开后隐式地调用。

参数名	参数类型	必填	默认值	描述
builder	()-> Unit	是	-	builder对应的渲染函数。

bindView(CustomView)

public func bindView(view: CustomView)

将CustomView绑定到自定义弹窗构建器, 用户无需主动调用，会在宏展开后隐式地调用。

参数名	参数类型	必填	默认值	描述
view	CustomView	是	-	被绑定的CustomView。

枚举类型

DialogAlignment

定义弹窗在竖直方向上的对齐方式。

枚举值	描述
Top	垂直顶部对齐。
Center	垂直居中对齐。
Bottom	垂直底部对齐。
Default	默认对齐。
TopStart	左上对齐。
TopEnd	右上对齐。
CenterStart	左中对齐。
CenterEnd	右中对齐。
BottomStart	左下对齐。
BottomEnd	右下对齐。

自定义类型说明

CustomDialogControllerOptions

构造函数

public init(
        builder: () -> Unit,
        cancel!: () -> Unit = { => },
        autoCancel!: Bool = true,
        alignment!: DialogAlignment = DialogAlignment.Default,
        offset!: Offset = Offset(0.vp, 0.vp),
        customStyle!: Bool = false,
        gridCount!: Option<Int32> = Option.None,
        maskColor!: Color = Color(0x33000000),
        maskRect!: Rectangle = Rectangle(),
        openAnimation!: Option<AnimateParam> = Option.None,
        closeAnimation!: Option<AnimateParam> = Option.None,
        showInSubWindow!: Bool = false,
        backgroundColor!: Option<Color> = Option.None,
        cornerRadius!: Length = 24.vp
    )

声明自定义弹窗相关设置的参数。

参数名	参数类型	必填	默认值	描述
builder	()-> Unit	是	{ => }	自定义弹窗内容构造器。
cancel	()-> Unit	否	{ => }	返回、ESC键和点击遮障层弹窗退出时的回调。
autoCancel	Bool	否	true	是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。
alignment	DialogAlignment	否	DialogAlignment.Default	弹窗在竖直方向上的对齐方式。
offset	Offset	否	Offset(0.vp, 0.vp)	弹窗相对alignment所在位置的偏移量。
customStyle	Bool	否	false	弹窗容器样式是否自定义。设置为false时，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%。设置为true时，宽度跟随子节点自适应，圆角为0，弹窗背景色为透明色。
gridCount	Option	否	Option.None	弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。
maskColor	Color	否	Color(0x33000000)	自定义蒙层颜色。
maskRect	Rectangle	否	Rectangle()	弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
openAnimation	Option	否	Option.None	自定义设置弹窗弹出的动画效果相关参数。iterations默认值为1，默认播放一次，设置为其他数值时按默认值处理。playMode控制动画播放模式，默认值为PlayMode.Normal，设置为其他数值时按照默认值处理。
closeAnimation	Option	否	Option.None	自定义设置弹窗关闭的动画效果相关参数。iterations默认值为1，默认播放一次，设置为其他数值时按默认值处理。playMode控制动画播放模式，默认值为PlayMode.Normal，设置为其他数值时按照默认值处理。
showInSubWindow	Bool	否	false	某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。
backgroundColor	Option	否	Option.None	设置弹窗背板填充。如果同时设置了内容构造器的背景色，则backgroundColor会被内容构造器的背景色覆盖。
cornerRadius	Length	否	24.vp	设置背板的圆角半径。

说明

参数builder并非init函数的实际参数，在@Component宏展开后会去掉该参数
并隐式地在组件初始化函数中调用 setBuilder(builder: ()-> Unit)。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @CustomDialog
    class MyDialog {
        var controller: Option<CustomDialogController> = Option.None
        func build() {
            Row(60) {
                Button("cancel").onClick { evt =>
                    controller?.close()
                }
    
                Button("confirm").onClick { evt =>
                    controller?.close()
                }
            }.height(500.px)
        }
    }
    
    @Entry
    @Component
    class MyView {
        var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(builder: MyDialog()))
        func build() {
            Column {
                Button("open dialog").onClick({evt =>
                    dialogController.`open`()
                })
            }
        }
    }

如对您有帮助，帮忙点个“在看、关注” 让更多的人受益~！