promptAction

import { promptAction } from '@kit.ArkUI';


@Entry
@Component
struct PromptPage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Button('打开弹窗')

        .onClick(() => {
          promptAction.showToast({
            message:"我爱祖国",
            duration:3000,
            bottom:'50%',
            textColor:Color.White,
            backgroundColor:Color.Black,
            backgroundBlurStyle:BlurStyle.NONE
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}
2、CustomDialog
@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('你喜欢媳妇吗?')
        .fontSize(20)
      Row({space:10}){
        Button('喜欢').onClick(()=>{
          this.controller?.close()
        })
        Button('超级喜欢').onClick(()=>{
          this.controller?.close()
        })
      }.width('100%')
      .height(150)
      .justifyContent(FlexAlign.SpaceAround)

    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .backgroundColor(Color.Transparent)

  }
}

@Entry
@Component
struct CustomDialogPage {
  @State message: string = 'Hello World';
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    backgroundColor:Color.Transparent
  })
  build() {
    Column() {
      Button('打开弹窗').onClick(()=>{
        this.dialogController?.open();
      })
    }
    .height('100%')
    .width('100%')
  }
}
3、OperCustomDialog 用法1
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct OperCustomDialogPage {

  @State dialogId:number=0

  @Builder
  myDialog(){
    Column(){
      Text("你喜欢李清扬吗")
        .fontColor(Color.Yellow)
      Row({space:30}){
        Button('喜欢').onClick(()=>{
          promptAction.closeCustomDialog(this.dialogId)
        })

        Button('不喜欢').onClick(()=>{
          promptAction.closeCustomDialog(this.dialogId)
        })
      }
    }
  }

  build() {
    Column() {
      Button('打开弹窗').onClick(()=>{
        promptAction.openCustomDialog({
          builder:()=>{
            this.myDialog()
          },
          backgroundColor:Color.Black
        }).then((dialogId:number)=>{
          this.dialogId = dialogId
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

3、OperCustomDialog 用法2

// 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}`);
        })
    }
  }
}
// Index.ets
import { ComponentContent } from '@kit.ArkUI';
import { PromptActionClass } from '../model/MyDialog';


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();
      })
  }.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct OpenCustomDialog2Page {
  @State message: string = "hello";
  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() {
    Row() {
      Column() {
        Button("open dialog and update options")
          .margin({ top: 50 })
          .onClick(() => {
            PromptActionClass.openDialog();

            setTimeout(() => {
              PromptActionClass.updateDialog({
                alignment: DialogAlignment.Bottom,
                offset: { dx: 0, dy: -50 }
              });
            }, 1500)
          })
        Button("open dialog and update content")
          .margin({ top: 50 })
          .onClick(() => {
            PromptActionClass.openDialog();

            setTimeout(() => {
              this.contentNode.update(new Params('update66'));
            }, 1500)
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

案例:

import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';

interface DeleteBuildType {
  ok:()=>void
  cancel:()=>void
  // ok:string
}

@Builder
function DeleteBuilder(params:DeleteBuildType){
  Column(){
    Text('删除')
    Row(){
      Button('是').onClick(()=>params.ok())
      Button('否').onClick(()=>params.cancel())
    }.width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)

  }
}

@Entry
@Component
struct Dialog4Page {

  private contentNode:ComponentContent<Object> = new ComponentContent(this.getUIContext(),wrapBuilder(DeleteBuilder),{
    ok:()=>{
      this.getUIContext().getPromptAction().closeCustomDialog(this.contentNode)
    },
    cancel:()=>{
      this.getUIContext().getPromptAction().closeCustomDialog(this.contentNode)
    }
  } as DeleteBuildType)

  build() {
    Column() {

      Button('点击删除').onClick(()=>{
        this.getUIContext().getPromptAction().openCustomDialog(this.contentNode,{
          isModal:false,
          autoCancel:false
        })
      })

    }
    .height('100%')
    .width('100%')
  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐