HarmonyOS 鸿蒙Next 自定义Dialog

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义Dialog

//自定义CustomDialog @Component export struct CustomDialog {

@BuilderParam dialogContent: () => void = this.dialogContentView

show(propName: string) { let dialog: CustomDialogController = AppStorage.get(propName)! if (dialog == undefined) { dialog = new CustomDialogController({ builder: CustomDialogView({dialogContent: () => { this.dialogContent() } }), customStyle: true }) } AppStorage.setOrCreate(propName, dialog) dialog.open() }

close(propName: string) { let dialog: CustomDialogController = AppStorage.get(propName)! dialog?.close() }

build() { }

@Builder dialogContentView() { Column(){ Text(‘弹框’) .width(‘43%’) .height(‘17.1%’) .textAlign(TextAlign.Center) .fontColor(Color.Black) .fontSize(13) .borderRadius(6) .backgroundColor("#CCFF9500") }.width(200).height(200).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center) } }

//调用方式 @Component struct BookCityHomePage {

dialog = new CustomDialog({dialogContent: () => { this.dialogContentView() } })

@Builder dialogContentView() { Column(){ Text(‘弹框’) .width(‘43%’) .height(‘17.1%’) .textAlign(TextAlign.Center) .fontColor(Color.Black) .fontSize(13) .borderRadius(6) .backgroundColor("#CCFF9500") }.width(200).height(200).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center) } aboutToAppear() { this.dialog.show('dialog) } }


报错:
Error message:is not callable

该如何解决,我就想从BookCityHomePage 传[@Builder](/user/Builder)方法到CustomDialog中

更多关于HarmonyOS 鸿蒙Next 自定义Dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

根据你提供的demo,当前@BuilderParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化,无法通过new CustomDialog()来进行初始化。

可参考官网链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5# 初始化builderparam装饰的方法

更多关于HarmonyOS 鸿蒙Next 自定义Dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,自定义Dialog通常涉及对UI组件的自定义布局和逻辑处理。以下是如何实现的基本步骤:

  1. 定义布局文件: 在resources/base/layout目录下创建一个XML布局文件,定义Dialog的外观。可以使用鸿蒙提供的各种UI组件,如TextButton等,来构建所需的界面。

  2. 创建Dialog对象: 在JavaScript或eTS(Extension TypeScript)代码中,通过dialog模块创建Dialog对象。加载之前定义的布局文件作为Dialog的内容。

  3. 设置Dialog属性: 配置Dialog的属性,如标题、是否可取消、动画效果等。这些属性可以在创建Dialog对象时设置,也可以通过后续的方法调用进行修改。

  4. 显示Dialog: 调用Dialog对象的show方法将其显示出来。通常,这会在用户执行某个操作(如点击按钮)时触发。

  5. 处理用户交互: 为Dialog中的组件(如按钮)设置事件监听器,以处理用户的交互操作。例如,当用户点击“确定”按钮时,可以关闭Dialog并执行相应的逻辑。

请注意,以上步骤是基于HarmonyOS的通用开发流程,具体实现可能因项目结构和需求而有所不同。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部