3.7、HarmonyOS Next 自定义弹窗(CustomDialog)

自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考

创建自定义弹窗

  1. 使用@CustomDialog装饰器装饰自定义弹窗。
  2. @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。
ts 复制代码
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('我是内容')
      .fontSize(20)
      .margin({ top: 10, bottom: 10 })
    }
  }
}

3.创建构造器,与装饰器呼应相连。

ts 复制代码
dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
})

4.点击与onClick事件绑定的组件使弹窗弹出

ts 复制代码
Flex({justifyContent:FlexAlign.Center}){
  Button('click me')
    .onClick(() => {
      this.dialogController.open()
    })
}.width('100%')

弹窗的交互

弹窗可用于数据交互,完成用户一系列响应操作。

1、在@CustomDialog装饰器内添加按钮操作,同时添加数据函数的创建。

ts 复制代码
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

2、页面内需要在构造器内进行接收,同时创建相应的函数操作。

ts 复制代码
dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
    }),
    alignment: DialogAlignment.Default,  // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
  })
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  onAccept() {
    console.info('Callback when the second button is clicked')
  }

上一篇 3.6、文本输入(TextInput/TextArea) 下一篇 3.8、气泡提示(Popup)

相关推荐
奶糖不太甜2 小时前
鸿蒙ArkUI开发常见问题解决方案:从布局到事件响应全解析
harmonyos·arkui
鸿蒙先行者2 小时前
鸿蒙调试工具连接失败解决方案与案例分析
harmonyos
鸿蒙小灰2 小时前
ArkWeb优化方法及案例
harmonyos·arkweb
HarmonyOS小助手3 小时前
货拉拉开源两款三方库,为鸿蒙应用高效开发贡献力量
harmonyos·鸿蒙·鸿蒙生态
HarderCoder5 小时前
重学仓颉-10集合类型完全指南:从基础到高级应用
harmonyos
小喷友7 小时前
第9章 鸿蒙微内核与系统架构
前端·app·harmonyos
HarderCoder8 小时前
重学仓颉-9扩展系统完全指南:从基础概念到高级应用
harmonyos
HarmonyOS_SDK9 小时前
让集成更安心,让连接更高效:鸿蒙生态伙伴SDK优选库双端赋能
harmonyos
被开发耽误的大厨15 小时前
鸿蒙ArkTS 核心篇-13-if分支语句
华为·harmonyos·鸿蒙
爱笑的眼睛1117 小时前
HarmonyOS Router 基本使用详解:从代码示例到实战要点
华为·harmonyos