HarmonyOS Next 之-组件之弹窗

在ArkUI（方舟UI框架）中，CustomDialog 是一种强大的自定义弹窗工具，适用于广告、中奖提示、警告、软件更新等多种与用户交互的场景。本文将带你了解如何在ArkUI中使用CustomDialog创建自定义弹窗。

一、创建自定义弹窗

使用@CustomDialog装饰器

使用@CustomDialog装饰器来装饰自定义弹窗，并在此装饰器内定义弹窗内容。例如：

typescript 复制代码

@CustomDialog struct MyCustomDialog {

    controller: CustomDialogController = new CustomDialogController({

        builder: MyCustomDialog({})

    });



    build() {

        Column() {

            Text('这是自定义弹窗的内容').fontSize(20).margin({ top: 10, bottom: 10 });

        }

    }

}

创建构造器并绑定onClick事件

创建与装饰器相呼应的构造器，并绑定onClick事件以实现弹窗的弹出。例如：

typescript 复制代码

@Entry @Component struct CustomDialogUser {

    dialogController: CustomDialogController = new CustomDialogController({

        builder: MyCustomDialog()

    });



    build() {

        Column() {

            Button('点击我弹出弹窗').onClick(() => {

                this.dialogController.open();

            }).width('100%').margin({ top: 5 });

        }

    }

}

二、自定义弹窗的数据交互

在自定义弹窗中，你可以添加按钮和数据函数，以实现用户与弹窗之间的数据交互。例如：

typescript 复制代码

@CustomDialog struct TipDialog {

    @State title: string = "提示";

    @State message: string = "";

    @State cancelValue: string = "取消";

    @State confirmValue: string = "确定";

    cancel?: () => void;

    confirm?: () => void;

    controller: CustomDialogController = new CustomDialogController({

        builder: TipDialog()

    });



    build() {

        Column() {

            Text(this.title).width('100%').height(40).textAlign(TextAlign.Center).fontColor(Color.White).backgroundColor($r('app.color.dialog_title_bg'));

            Text(this.message).height(70).width('100%').textAlign(TextAlign.Center);

            Row() {

                Button(this.cancelValue).layoutWeight(1).backgroundColor(Color.White).fontColor(Color.Black).type(ButtonType.Normal).height(40).onClick(() => {

                    this.controller.close();

                    if (this.cancel) {

                        this.cancel();

                    }

                });

                Button(this.confirmValue).layoutWeight(1).type(ButtonType.Normal).backgroundColor($r('app.color.main_color')).fontColor(Color.White).height(40).onClick(() => {

                    this.controller.close();

                    if (this.confirm) {

                        this.confirm();

                    }

                });

            }.width('100%');

        }

    }

}

在页面内，你需要接收这些回调并创建相应的函数操作：

typescript

@Entry @Component struct CustomDialogUser {

    dialogController: CustomDialogController = new CustomDialogController({

        builder: TipDialog({

            title: '警告',

            message: '是否退出？',

            cancel: () => { this.cancelEvent(); },

            confirm: () => { this.confirmEvent(); }

        })

    });



    cancelEvent() {

        console.log('点击了取消');

    }



    confirmEvent() {

        console.log('点击了确定');

    }



    build() {

        Column() {

            Button('显示弹框').onClick(() => {

                this.dialogController.open();

            }).width('100%').margin({ top: 5 });

        }

    }

}

总结：

通过本文，你应该已经掌握了如何在ArkUI中使用CustomDialog创建自定义弹窗，并实现用户与弹窗之间的数据交互。希望这些示例能够帮助你更好地理解和应用ArkUI中的自定义弹窗功能。