ArkUI-自定义弹窗

项目案例 (opens new window)

arkts-common-components-custom-dialog.md

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

案例一

@Entry
@Component
struct CustomDialogUser {
  // 3.创建构造器，与装饰器呼应相连
  dialogController: CustomDialogController = new CustomDialogController({
  builder: CustomDialogExample(),
})

  build() {
    Column() {
      Button('click me')
        // 4.点击与onClick事件绑定的组件使弹窗弹出。
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

// 1.使用@CustomDialog装饰器装饰自定义弹窗。
// 2.@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })

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

案例二

// 弹窗的交互
@Entry
@Component
struct CustomDialogUser {
  // 此处的onCancel onAccept 有点类似重写方法
  @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 })
  }
}


// 1.在@CustomDialog装饰器内添加按钮，同时添加数据函数。
@CustomDialog
struct CustomDialogExample {
  // 此处的cancel confirm 类似默认方法
  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 })
      // SpaceAround Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同
      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 })
    }
  }
}