基础自定义弹出框(不推荐)

CustomDialog 是自定义弹出框，可用于广告、中奖、警告、软件更新等与用户交互响应操作。

开发者可以通过CustomDialogController类显示自定义弹出框

注意

当前，ArkUI 弹出框均为非页面级弹出框，在页面路由跳转时，如果开发者未调用 close 方法将其关闭，弹出框将不会自动关闭。

若需实现在跳转页面时覆盖弹出框的场景，建议使用 Navigation

弹出框（CustomDialog）可以通过配置 isModal 来实现模态和非模态弹窗。isModal 为 true 的时候，弹出框为模态弹窗。 isModal 为 false 时，弹出框为非模态弹窗。

创建自定义弹出框

(1) 创建自定义@CustomDialog

使用@CustomDialog 装饰器装饰自定义弹出框，可在此装饰器内自定义弹出框内容。

CustomDialogController 需在@Component 内定义。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })

  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)
    }.height(60).justifyContent(FlexAlign.Center)
  }
}

(2) 父元素创建自定义弹出框控制器

创建自定义弹出框控制器

 @Entry
 @Component
 struct CustomDialogUser {
   dialogController: CustomDialogController = new CustomDialogController({
     builder: CustomDialogExample(),
   })
 }

(3) 父元素调用绑定的事件(完整版)

@Entry
@Component
struct Index17 {
    dialogController: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample(),
    })

    build() {
        Column() {
            Button('click me')
                .onClick(() => {
                    // 调用控制器的open方法弹出弹出层
                    this.dialogController.open()
                })
        }.width('100%').margin({ top: 5 })
    }
}

总结

1. 使用@CustomDialog 装饰器装饰自定义弹出框，可在此装饰器内自定义弹出框内容。

2. 自定义弹出框里面，需要定义CustomDialogController 控制器。

3. 父元素创建自定义弹出框控制器，并调用绑定的事件。

弹出框的交互

弹出框可用于数据交互,完成用户一系列响应操作

(1) 在装饰器里面添加事件

class test {
    name: string = ""
    age: number = 0
}

@CustomDialog
struct CustomDialogExample {
    message?: string
    data?: test
    cancel?: () => void
    confirm?: () => void
    controller: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample({})
    })

    build() {
        Column() {
            Text(this.message).fontSize(28).fontColor(Color.Yellow)
            Text(this.data!.name).fontSize(30).width('100%')
            Text(this.data!.age.toString()).fontSize(30).width('100%')
            Button("确定")
                .type(ButtonType.Normal)
                .onClick(() => {
                    if (this.confirm) {
                        this.confirm()
                    }
                }).margin({
                bottom: 20
            })
            Button("取消")
                .type(ButtonType.Normal)
                .onClick(() => {
                    if (this.cancel) {
                        this.cancel()
                    }
                })
        }
        .height(250)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }
}

(2) 父元素创建自定义弹出框控制器

• 传入事件

class test {
    name: string = ""
    age: number = 0
}

@CustomDialog
struct CustomDialogExample {
    message?: string
    data?: test
    cancel?: () => void
    confirm?: () => void
    controller: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample({})
    })

    build() {
        Column() {
            Text(this.message).fontSize(28).fontColor(Color.Yellow)
            Text(this.data!.name).fontSize(30).width('100%')
            Text(this.data!.age.toString()).fontSize(30).width('100%')
            Button("确定")
                .type(ButtonType.Normal)
                .onClick(() => {
                    if (this.confirm) {
                        this.confirm()
                    }
                }).margin({
                bottom: 20
            })
            Button("取消")
                .type(ButtonType.Normal)
                .onClick(() => {
                    if (this.cancel) {
                        this.cancel()
                    }
                })
        }
        .height(250)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }
}


@Entry
@Component
struct Index19 {
    @State message: string = "111"
    @State dataall: test = {
        name: "李四",
        age: 56
    }
    dialogController: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample({
            message: this.message,
            data: this.dataall,
            cancel: () => {
                this.onCancel()
            },
            confirm: () => {
                this.onAccept()
            }
        }),
        openAnimation: {
            duration: 1200,
            // 类似动画效果的缓动或者贝塞尔曲线那种
            curve: Curve.Friction,
            delay: 500,
            playMode: PlayMode.Reverse,
            onFinish: () => {
                console.info('play end')
            }
        },
        // 点击遮罩层是否关闭
        autoCancel: false,
        // 对话框的位置
        alignment: DialogAlignment.Bottom,
        // 偏移量
        offset: { dx: 0, dy: -50 },
        backgroundColor: 'red',
        // 弹出框圆角
        cornerRadius: 50,
        width: '80%',
        height: 370,
        borderWidth: 1,
        borderStyle: BorderStyle.Dashed, //使用borderStyle属性，需要和borderWidth属性一起使用
        borderColor: Color.Blue, //使用borderColor属性，需要和borderWidth属性一起使用
        shadow: ({
            radius: 20,
            color: Color.Grey,
            offsetX: 50,
            offsetY: 0
        }),
    })

    // 单击确定的方法
    onAccept() {
        console.log("点击了确定")
        this.message = "子元素改变了";
        this.dataall = {
            name: "王五",
            age: 28
        }
        this.dialogController.close()
    }

    // 单机关闭方法
    onCancel() {
        console.log("点击了关闭")
        this.dialogController.close()
    }

    build() {
        Column() {
            Button('click me')
                .onClick(() => {
                    // 调用控制器的open方法弹出弹出层
                    this.dialogController.open()
                })
        }.width('100%').margin({ top: 5 })
    }
}