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

相关推荐
whysqwhw26 分钟前
鸿蒙AVSession Kit
harmonyos
whysqwhw2 小时前
鸿蒙各种生命周期
harmonyos
whysqwhw3 小时前
鸿蒙音频编码
harmonyos
whysqwhw3 小时前
鸿蒙音频解码
harmonyos
whysqwhw3 小时前
鸿蒙视频解码
harmonyos
whysqwhw4 小时前
鸿蒙视频编码
harmonyos
ajassi20004 小时前
开源 Arkts 鸿蒙应用 开发(十八)通讯--Ble低功耗蓝牙服务器
华为·开源·harmonyos
前端世界5 小时前
在鸿蒙应用中快速接入地图功能:从配置到实战案例全解析
华为·harmonyos
江拥羡橙6 小时前
【基础-判断】HarmonyOS提供了基础的应用加固安全能力,包括混淆、加密和代码签名能力
安全·华为·typescript·harmonyos
前端世界17 小时前
HarmonyOS 实战:用 @Observed + @ObjectLink 玩转多组件实时数据更新
华为·harmonyos