08使用弹窗

使用弹窗

弹窗

不依赖UI组件的全局自定义弹出框 (openCustomDialog)

设置工具类

src/main/ets/common/PromptActionClass.ets

// PromptActionClass.ets
import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';


export class PromptActionClass {
  static ctx: UIContext;
  static contentNode: ComponentContent<Object>;
  static options: promptAction.BaseDialogOptions;

  static setContext(context: UIContext) {
    PromptActionClass.ctx = context;
  }


  static setContentNode(node: ComponentContent<Object>) {
    PromptActionClass.contentNode = node;
  }


  static setOptions(options: promptAction.BaseDialogOptions) {
    PromptActionClass.options = options;
  }


  static openDialog() {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options)
        .then(() => {
          console.info('OpenCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }


  static closeDialog() {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .closeCustomDialog(PromptActionClass.contentNode)
        .then(() => {
          console.info('CloseCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }


  static updateDialog(options: promptAction.BaseDialogOptions) {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .updateCustomDialog(PromptActionClass.contentNode, options)
        .then(() => {
          console.info('UpdateCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }
}

在页面中使用弹窗

src/main/ets/common/PromptActionClass.ets

import { dxinScreenManager } from '../common/DxinScreenManager'
import { PromptActionClass } from '../common/PromptActionClass';
import { ComponentContent } from '@kit.ArkUI';
class Params {
  text: string = "";

  constructor(text: string) {
    this.text = text;
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
    Button('Close')
      .onClick(() => {
        PromptActionClass.closeDialog();
      })
  }
  .width("70%")
  .backgroundColor('#FFF0F0F0')
}
@Entry
@Component
struct Index {
  @State message: string = "弹窗";
  private ctx: UIContext = this.getUIContext();
  private contentNode: ComponentContent<Object> =
    new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));

  aboutToAppear(): void {
    PromptActionClass.setContext(this.ctx);
    PromptActionClass.setContentNode(this.contentNode);
    PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } });
  }
  build() {
    Column({ space: 30 }) {
      Text('不依赖UI组件的全局自定义弹出框 (openCustomDialog)').fontSize(22)

      Button("打开弹窗并更新位置配置")
        .margin({ top: 50 })
        .onClick(() => {
          PromptActionClass.openDialog();

          setTimeout(() => {
            PromptActionClass.updateDialog({
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -50 }
            });
          }, 1500)
        })
      Button("打开弹窗并更新内容")
        .margin({ top: 50 })
        .onClick(() => {
          PromptActionClass.openDialog();
          setTimeout(() => {
            this.contentNode.update(new Params('内容更新'));
          }, 1500)
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.theme_color'))
    .padding({
      top:dxinScreenManager.getTopSafeHeight(),
      bottom:dxinScreenManager.getBottomSafeHeight()
    })
  }
}