自定义弹窗

1.CustomDialog.ets

import router from '@ohos.router'
import CommonConstants from '../common/CommonConstants'


@Extend(Text)
function contentStyle(){
  .fontSize($r('app.float.agreement_content_size'))
  .lineHeight($r('app.float.space_20'))
  .margin({top:$r('app.float.space_20')})
}

@CustomDialog
export default struct  CustomDialog{
  controller:CustomDialogController
  cancel:()=>void
  confirm:()=>void

  build(){
    Column(){
      Text('提示内容').fontSize($r('app.float.agreement_title_size'))

      Text('提示内容')
        .contentStyle()

        Button('同意并继续')
          .fontColor(Color.White)
          .backgroundColor($r('app.color.app_theme_color'))
          .width(CommonConstants.PERCENTAGE_40)
          .onClick(()=>{
            if (this.controller != undefined) {
              this.controller.close()
              this.confirm()
            }
          })
      }.margin({ top:$r('app.float.space_20'),bottom: $r('app.float.space_20') })
    }
    .backgroundColor(Color.White)
    .width(CommonConstants.FULL_PARENT)
    .padding({left:$r('app.float.space_20'),right:$r('app.float.space_20'),top:$r('app.float.space_20')})
  }
}

2.使用

import CustomDialog from '../../view/CustomDialog';

dialogController:CustomDialogController = new CustomDialogController({
    builder: CustomDialog({
      cancel:()=>{//取消

      },
      confirm:()=>{//确定
  
      },
    }),
    autoCancel:false,//是否允许点击遮障层退出
    alignment:DialogAlignment.Center,//弹窗在竖直方向上的对齐方式。
    offset:{dx:0,dy:0},
  })

//需要弹出弹窗的地方调用
this.dialogController.open()