harmonyOS鸿蒙-UI-自定义弹窗-Toy模板网

这篇具有很好参考价值的文章主要介绍了harmonyOS鸿蒙-UI-自定义弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、创建自定义弹窗

1、使用@CustomDialog装饰器装饰自定义弹窗，此装饰器内进行自定义内容（也就是弹框内容）

@Extend(Text) function descStyle () {
  .fontSize(14)
  .fontWeight(400)
  .fontColor('#182431')
  .width('100%')
  .lineHeight(20)
  .margin({ top: 8 })
}
@CustomDialog
export default struct MyDialog{
  controller:CustomDialogController
  cancel:() => void
  confirm:() => void
  build(){
    Column(){
      Column(){
        Text('我是大标题')
      }
      Row(){
        Button('取消')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })
        Divider()
          .vertical(true)
          .height(22)
          .opacity(0.4)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          })
      }.width('100%')
      .margin({ top: 22 })
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .padding(16)
  }
}

上面代码中controller变量是弹框控制器，可以控制弹窗展示和关闭，该变量值是自动赋值。cancel和confirm两个函数是由父组件传入，在弹窗点击取消和确定时调用，可以用来改变父组件的状态值

2、创建构造器，与装饰器关联

import data_preferences from '@ohos.data.preferences';
import common from '@ohos.app.ability.common';
import hilog from '@ohos.hilog';
import MyDialog from './MyDialog';

@Component
@Entry
export struct SplashPage {
  context:common.UIAbilityContext = getContext(this) as common.UIAbilityContext

  dialogController:CustomDialogController = new CustomDialogController({
    builder:MyDialog({
      cancel: this.cancel,
      confirm:this.confirm
    }),
    alignment:DialogAlignment.Bottom,
    offset:{dx:0, dy:-24}
  })

  cancel() {
    hilog.info(0xF0000, 'dbTest', '%{public}s', `dialogController is cancel`)
  }

  confirm() {
    hilog.info(0xF0000, 'dbTest', '%{public}s', `dialogController is confirm`)
  }

  build(){
    Column() {
      Button('创建弹窗').onClick(() => {
        this.dialogController.open()
      })
    }.padding({top:500})
    .alignItems(HorizontalAlign.Center)
    .width('100%')
  }
}

上面代码中dialogController就是弹窗控制器，即CustomDialogController对象，该对象构造方法接收一个对象参数，其中builder对应值就是自定义的弹窗组件，需要@CustomDialog标注，alignment定义弹窗的位置，此处弹窗展示在底部，offset是弹窗相对于当前位置的偏移量，此处相对于底部再向上偏移24，效果如下

customdialogcontroller,Harmony鸿蒙,ui,harmonyos,鸿蒙