harmony 鸿蒙自定义弹窗(CustomDialog)

  • 2023-06-24
  • 浏览 (1356)

自定义弹窗(CustomDialog)

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

创建自定义弹窗

  1. 使用\@CustomDialog装饰器装饰自定义弹窗。

  2. \@CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。

   @CustomDialog
   struct CustomDialogExample {
     controller: CustomDialogController = new CustomDialogController({
       builder: CustomDialogExample({}),
     })
   
     build() {
       Column() {
         Text('我是内容')
           .fontSize(20)
           .margin({ top: 10, bottom: 10 })
       }
     }
   }
  1. 创建构造器,与装饰器呼应相连。
    @Entry
    @Component
    struct CustomDialogUser {
      dialogController: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample(),
      })
    }
  1. 点击与onClick事件绑定的组件使弹窗弹出。
   @Entry
   @Component
   struct CustomDialogUser {dialogController: CustomDialogController = new CustomDialogController({
       builder: CustomDialogExample(),
     })
   
     build() {
       Column() {
         Button('click me')
           .onClick(() => {
             this.dialogController.open()
           })
       }.width('100%').margin({ top: 5 })
     }
   }

zh-cn_image_0000001562700493

弹窗的交互

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

  1. 在\@CustomDialog装饰器内添加按钮,同时添加数据函数。
  @CustomDialog
  struct CustomDialogExample {
    cancel: () => void = () => {
      console.info('Callback when the first button is clicked')
    }
    confirm: () => void = () => {
      console.info('Callback when the second button is clicked')
    }
    controller: CustomDialogController = new CustomDialogController({
      builder: CustomDialogExample({
        cancel: this.cancel,
        confirm: this.confirm,
      }),
    })
  
    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 })
      }
    }
  }
  1. 页面内需要在构造器内进行接收,同时创建相应的函数操作。
  @Entry
  @Component
  struct CustomDialogUser {
    @State bud: Record<string, Function|void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
    dialogController: CustomDialogController = new CustomDialogController({
      builder: CustomDialogExample(this.bud),
    })
  
    onCancel() {
      console.info('Callback when the first button is clicked')
    }
  
    onAccept() {
      console.info('Callback when the second button is clicked')
    }
  
    build() {
      Column() {
        Button('click me')
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%').margin({ top: 5 })
    }
  }

zh-cn_image_0000001511421320

完整示例

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: undefined
  })

  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State bud: Record<string, Function|void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(this.bud),
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

相关实例

针对自定义弹窗开发,有以下相关实例可供参考:

你可能感兴趣的鸿蒙文章

harmony 鸿蒙UI开发

harmony 鸿蒙动画衔接

harmony 鸿蒙动画概述

harmony 鸿蒙属性动画接口说明

harmony 鸿蒙属性动画概述

harmony 鸿蒙模糊

harmony 鸿蒙色彩

harmony 鸿蒙按钮(Button)

harmony 鸿蒙进度条(Progress)

harmony 鸿蒙单选框(Radio)

0  赞