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中的自定义弹窗功能。

相关推荐
Georgewu10 小时前
【HarmonyOS】鸿蒙应用开发Text控件常见错误
harmonyos
Georgewu11 小时前
【HarmonyOS】富文本编辑器RichEditor详解
harmonyos
zhanshuo18 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少1 天前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少2 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划2 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core2 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡2 天前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
jie_07542 天前
鸿蒙系统(HarmonyOS)4.2 设备上实现无线安装 APK 并调试
华为·harmonyos