学习笔记（二十八）：ArkUi-自定义弹窗 (CustomDialog)

概述：

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

一、创建自定义弹框

1、使用@CustomDialog装饰器装饰自定义弹窗，可在此装饰器内自定义弹窗内容

// 自定义弹框内容
@CustomDialog
struct MyCustomerDialog{
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })
  build(){
    Text('这是内容')
      .height(40)
  }
}

2、创建构造器，与装饰器呼应相连，并实现onClick事件绑定的组件使弹窗弹出

@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog()
  })
  build() {
    Row() {
      Column() {
        Button('显示弹框')
          .onClick(()=>{
              this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 自定义弹框使用示例
@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog()
  })
  build() {
    Row() {
      Column() {
        Button('显示弹框')
          .onClick(()=>{
              this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 自定义弹框内容
@CustomDialog
struct MyCustomerDialog{
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })
  build(){
    Text('这是内容')
      .height(40)
  }
}

 

 

二、弹窗数据交互

1、在@CustomDialog装饰器内添加按钮，同时添加数据函数

// 自定义提示弹框
@CustomDialog
export struct TipDialog{
  @State title:string = "提示"  // 标题
  @State message:string = "";   // 提示内容
  @State cancelValue:string = "取消"; //取消按钮文案
  @State confirmValue:string = "确定"; //确定按钮文案
  cancel?:()=>void   // 取消事件
  confirm?:()=>void   // 确定事件

  controller: CustomDialogController = new CustomDialogController({
    builder: TipDialog()
  })
  build(){
    Column() {
      Text(this.title)
        .width('100%')
        .height(40)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .backgroundColor($r('app.color.dialog_title_bg'))
      Text(this.message)
        .height(70)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row() {
        Button(this.cancelValue)
          .layoutWeight(1)
          .backgroundColor(Color.White)
          .fontColor(Color.Black)
          .type(ButtonType.Normal)
          .height(40)
          .onClick(()=>{
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          })
        Button(this.confirmValue)
          .layoutWeight(1)
          .type(ButtonType.Normal)
          .backgroundColor($r('app.color.main_color'))
          .fontColor(Color.White)
          .height(40)
          .onClick(()=>{
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          })
      }
      .width('100%')
    }
  }
}

 

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

// 自定义弹框使用示例
@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({
      title:'警告',
      message: '是否退出',
      cancel:()=>{
        this.cancelEvent()
      },
      confirm:()=>{
        this.confirmEvent()
      }
    })
  })

  cancelEvent(){
    console.log('点击了取消')
  }
  confirmEvent(){
    console.log('点击了确定')
  }

  build() {
    Row() {
      Column() {
        Button('显示弹框')
          .onClick(() => {
            this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 首页
import { HomeBussinessConfig } from '../../common/config/HomeBussinessConfig'
import {TipDialog} from '../../components/dialogs/TipDialog'
@Entry
@Component
struct Home {
  @State gridItems:object[] = [] // gridItem数据源

  controller:CustomDialogController= new CustomDialogController({
    builder : TipDialog({
      message: '点击了内容',
      confirm: ()=>{
        console.log('点击了确定')
        this.controller.close()
      },
      cancel: ()=>{
        console.log('点击了取消')
        this.controller.close()
      }
    })
  })

  aboutToAppear() {
    this.setButtons(['销售开单','采购入库','新增货品','新增客户','新增供货商'])
  }
  // 动态设置需要显示的tab
  setButtons(btn: string[]) {
    this.gridItems = []
    for (let i = 0; i < btn.length; i++) {
      let index = HomeBussinessConfig.buttons.findIndex((item) => {
        return item.title === btn[i]
      })
      if (index != -1) {
        this.gridItems.push(HomeBussinessConfig.buttons[index])
      }
    }
  }

  // 按钮点击事件
  clickBussinessBtn(title:string){
    console.log('点击了'+title)
    this.controller.open()
  }

  build() {
    Column() {
      GridRow({columns:4,direction:GridRowDirection.Row
      ,gutter: { x:4,y:12 }}) {
        ForEach(this.gridItems,(item:HomeBussinessConfig,index)=>{
          GridCol(){
            this.btnItem(item.title,item.icon)
          }
          .width('100%')
        })
      }
      .padding(20)
      .backgroundColor(Color.White)
    }
    .width('100%')
  }

  // 自定义构建函数组件 gridCol内容
  @Builder btnItem(title:string,img:Resource){
    Column() {
      Image(img)
        .width(40)
        .height(40)
      Text(title)
        .fontSize(12)
        .margin({ top: 6 })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .padding({ top: 6, bottom: 4 })
    .onClick(()=>this.clickBussinessBtn(title))
  }

}

三、弹窗样式

弹窗通过定义宽度、高度、背景色、阴影等参数来控制样式。

controller:CustomDialogController= new CustomDialogController({
    builder : TipDialog({
      message: '点击了内容',
      confirm: ()=>{
        console.log('点击了确定')
        this.controller.close()
      },
      cancel: ()=>{
        console.log('点击了取消')
        this.controller.close()
      }
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 20,
    width: '80%',
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })

 

 

@CustomDialog自定义弹框的缺点：

必须在@Component struct内部定义，即在UI层创建控制器，

当一个页面需要弹出多个自定义弹窗时，就需要创建对应个数的CustomDialogController，这会造成UI层代码冗余，无法做到弹窗与界面的解耦