ArkTS 动态生成对话框的方式

动态生成持有 CustomDialogController 的组件，来实现动态生成对话框

代码

包括四个ets文件（MyDialogComponent、MyDialog、MyButton、MyBaseAdapter）

MyDialogComponent.ets

import {
    AlertParams, DateTimeParams, MyDialog, MyDialogParams, MyDialogType, MyObject, ProgressParams, PullUpButtonParams } from './MyDialog';
import {
    BaseAdapter } from './MyBaseAdapter';
import {
    MyButton } from './MyButton';


const color333333 = 0xff333333;
const line = 0xffcccccc;
const titleBarColor = 0xffE5431B;
const color999999 = 0xff999999;
const colorF9F9F9 = 0xffF9F9F9;
const colorF2F2F2 = 0xffF2F2F2;


@CustomDialog
struct AlertDialogBuilder {
   
  controller: CustomDialogController;
  params!: AlertParams;
  @State maxHeight: number = 0;
  heightForRoot: number = 0;
  heightForTitle: number = 0;

  aboutToAppear() {
   
    this.params.title ??= ""
    this.params.message ??= ""
    this.params.btnOK ??= "确定"
    this.params.btnCancel ??= ""
  }

  @Builder
  buildContent() {
   
    Column() {
   
      Column() {
   
        Row() {
   
          if (this.params.title!.length > 0) {
   
            Text(this.params.title)
              .fontColor(color333333)
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .padding({
    bottom: 13 })
              .onAreaChange((_, newArea) => {
   
                let height = newArea.height as number;
                if (height != this.heightForTitle) {
   
                  this.heightForTitle = height;
                  this.refreshMaxHeight();
                }
              })
          } else {
   
            Blank().height(13)
          }
        }.constraintSize({
    minHeight: 13 })

        Column() {
   
          Scroll() {
   
            Column() {
   
              Text(this.params.message).fontColor(color333333).fontSize(16)
            }
          }.scrollable(ScrollDirection.Vertical) //.edgeEffect(EdgeEffect.Spring)
        }.constraintSize({
    maxHeight: this.maxHeight > 0 ? this.maxHeight : "100%" })

        Row() {
   
          if (this.params.btnCancel!.length > 0) {
   
            MyButton({
   
              text: this.params.btnCancel,
              buttonHeight: 44,
              click: () => {
   
                MyDialogParams.close(this.params);
                this.params.btnCancelClick?.();
              }
            }).layoutWeight(1)
          }
          if (this.params.btnCancel!.length > 0 && this.params.btnOK!.length > 0) {
   
            Blank().width(24)
          }
          if (this.params.btnOK!.length > 0) {
   
            MyButton({
   
              text: this.params.btnOK,
              buttonHeight: 44,
              click: () => {
   
                MyDialogParams.close(this.params);
                this.params.btnOKClick?.();
              }
            }).layoutWeight(1)
          }
        }.padding({
    top: 24 })
      }.padding(24)
      .backgroundColor(Color.White)
      .borderRadius(10)
    }
    .margin({
    left: 32, right: 32, top: 32, bottom: 32, })
    .onClick(() => {
   

    })
  }

  build() {
   
    Column() {
   
      this.buildContent()
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
    .onClick(() => {
   
      if (this.params.autoCancel) {
   
        MyDialogParams.close(this.params);
        this.params.cancel?.();
      }
    })
    .onAreaChange((_, newArea) => {
   
      let height = newArea.height as number;
      if (this.heightForRoot != height) {
   
        this.heightForRoot = height;
        this.refreshMaxHeight();
      }
    })
  }

  refreshMaxHeight() {
   
    if (this.heightForRoot > 0) {
   
      if (this.params.title!.length > 0 && this.heightForTitle == 0) return;
      let tempHeight = this.heightForRoot - (32 + 32) - (24 + this.heightForTitle + 13) - (24 + 44 + 24);
      if (tempHeight != this.maxHeight) {
   
        this.maxHeight = tempHeight;
      }
    }
  }
}

@CustomDialog
struct ProgressDialogBuilder {
   
  controller: CustomDialogController;
  params!: ProgressParams;
  @State progress: number = -1;
  @State message: string = "";

  aboutToAppear() {
   
    this.message = this.params.message ?? "";
    this.progress = this.params.progress ?? -1;
    if (this.progress >= 0) {
   
      this.params.updateProgress = (progress, message) => {
   
        this.progress = progress ?? 0;
        this.message = message ?? "";
      }
    }
  }

  @Builder
  buildContent() {
   
    Column() {
   
      if (this.progress >= 0) {
   
        Stack() {
   
          Progress({
    value: this.progress, total: 100, type: ProgressType.Ring }).color(titleBarColor).style({
    strokeWidth: 10, scaleCount: 10, scaleWidth: 10 })
            .width("100%").height("100%")
          Row() {
   
            Text(this.params.progress!.toFixed(1)).fontColor(color333333).fontSize(22).fontWeight(FontWeight.Bold)
            Text("%").fontColor(color333333).fontSize(12).fontWeight(FontWeight.Bold).padding({
    left: 2, bottom: 3 })
          }.alignItems(VerticalAlign.Bottom)
        }.align(Alignment.Center).width(100).height(100)

        if (this.message.length > 0) {
   
          Text(this.message)
            .fontColor(color333333)
            .fontSize(18)
            .maxLines(6)
            .textOverflow({
    overflow: TextOverflow.Ellipsis })
            .padding({
    top: 16, left: 8, right: 8, bottom: 8 })
        }
      } else {
   
        LoadingProgress().color(titleBarColor).width(100).height(100)
        if (this.message.length > 0) {
   
          Text(this.message)
            .fontColor(color333333)
            .fontSize(18)
            .maxLines(6)
            .textOverflow({
    overflow: TextOverflow.Ellipsis })
            .padding(8)
        }
      }
    }
    .padding(24)
    .backgroundColor(Color.White)
    .borderRadius(10)
    .margin({
    left: 32, right: 32, top: 32, bottom: 32, })
    .onClick(() => {
   

    })
  }

  build() {
   
    Column(