HarmonyOS自定义弹出对话框CustomDialog并传递变量

HarmonyOS定义了一系列弹窗反馈类的组件​

和前端开发框架VUE3配套生态库element plus中的提供各种组件相比,还是要少一些。可能是手机端操作和PC端操作的差异导致的​

如果内置的弹窗不满足要求,可以基于CustomDialog自定义出各种个性化的反馈组件。

首先新建一个ets文件,使用CustomDialog装饰器定义一个自定义的dialog。其内部的语法和普通的Component是完全相同的,通过组合基础组件可以实现不同的布局。

注意需要传递的参数使用@Link进行修饰,在"实例化"的时候引用

javascript 复制代码
@CustomDialog
export default struct CustomActionSheet {
  @Link actionList: string[]
  controller: CustomDialogController
  cancel: () => void


  build() {
    Column() {
      ForEach(this.actionList, (item: string) => {
        Text(item)
          .width('100%')
          .height(24)
          .fontSize(16)
          .margin({ top: 2, bottom: 2 })
          .textAlign(TextAlign.Center)
          .onClick((e)=>{

          })
      }, item => item)


      Button('取消', { type: ButtonType.Normal }).borderRadius(4).width(80).onClick((e) => {
        this.controller.close()
        this.cancel()
      })
    }
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.Center)
    .height(200)
    .padding({ left: 10, top: 20 })
    .borderRadius(8)
  }
}

​然后在父组件中实例化CustomDialogController,并在builder属性中引用这个CustomDialog​

javascript 复制代码
diaglogController: CustomDialogController = new CustomDialogController({
    builder: CustomActionSheet({
      cancel: this.onCancel,
      actionList: $actionList
    }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })

在需要触发的地方调用即可​

javascript 复制代码
Button().onClick((e) => {
          if (this.diaglogController != undefined) {
            this.diaglogController.open()

          }
        })

最终效果:

​​​​​​​

相关推荐
脑子缺根弦29 分钟前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳9 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼13 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG15 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺20 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_21 小时前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘21 小时前
基于华为欧拉系统安装FileGator文件管理器
华为
小周学学学21 小时前
zabbix以SNMP(V2C)监控网络设备,以华为设备为例
服务器·华为·zabbix
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos