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

相关推荐
zhanshuo4 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo4 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7989 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw15 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos