【鸿蒙南向开发】OpenHarmony——ets自定义弹窗UI组件封装

前言

​ 鸿蒙已经提供了全局UI方法自定义弹窗，本文是基于基础的自定义弹窗来实现提示消息弹窗、确认弹窗、输入弹窗的UI组件封装。

一、消息确认弹窗

首先看下效果：

1.1、首先先定义一个新的组件ConfirmDialog

@CustomDialog
export default struct ConfirmDialog {
	title: string = ''
    content: string = ''
    confirmFontColor: string = '#E84026'
    cancelFontColor:string = '#0A59F7'
    confirmText:string = '确认'
    cancelText:string = '取消'
    controller: CustomDialogController
    cancel: () => void
    confirm: () => void
 	build(){}   
}

自定义确认弹窗可自定义传入的参数有：

​ 可选参数：标题title（默认值：“”），正文内容content（默认值：“”），确认按钮字体颜色confirmFontColor（默认值：#E84026），取消按钮字体颜色cancelFontColor（默认值：#0A59F7），确认按钮文案（默认值：确认），取消按钮文案（默认值：取消）

​ 必须参数：自定义弹窗控制器controller: CustomDialogController，确认按钮触发事件confirm()，取消按钮触发事件cancel()

1.2、标题、正文、按钮封装

一个确认弹窗组件主要由标题、正文等文本内容和取消、确认等按钮事件组成。下面将分别对文案和按钮通过**@Extend**装饰器进行封装。

@Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。

// 标题title与正文content自定义样式
@Extend(Text) function fancfontSize(fontSize: number) {
  .fontSize(fontSize)
  .width('100%')
  .fontColor('rgba(0, 0, 0, 0.86)')
  .textAlign(TextAlign.Center)
  .padding({ top: 15, bottom: 0, left: 8, right: 8 })
  .alignSelf(ItemAlign.Center)
  .margin({top: 16})
}

// 取消、确认按钮自定义样式
@Extend(Text) function fancBtn(fontColor: string) {
  .fontColor(fontColor)
  .backgroundColor(0xffffff)
  .width(188)
  .height(29)
  .fontSize(22)
  .textAlign(TextAlign.Center)
}

本示例仅标题与正文仅支持字体大小fontSize自定义，按钮仅支持按钮文案字体颜色fontColor自定义，其他通用属性皆是写定的，若想支持其他属性自定义，也可通过fancfontSize()添加新的参数。

其次，可以更进一步的对标题与正文通过@Builder装饰器进行封装，且通过是否传入title、content字段来判断是否展示对应文案。

@Builder装饰的方法用于定义组件的声明式UI描述，在 一个自定义组件内快速生成多个布局内容。 @Builder装饰方法的功能和语法规范与build函数相同。

// 文案样式
  @Builder TipTextStyle(tip:string, fontSize:number) {
    Text(tip)
      .fancfontSize(fontSize)
      .visibility(tip.length >