学习笔记（三十）：ArkUi-UIContext.getPromptAction(弹窗)

概述：

基于promptAction弹窗演进而来，支持全局自定义弹窗，不依赖UI组件，依赖UIContext，

支持在非页面文件中使用，弹窗内容支持动态修改，支持自定义弹窗圆角半径、大小和位置，

适合在与页面解耦的全局弹窗、自定义弹窗显示和退出动画等场景下使用。

注意：

需先使用UIContext中的getPromptAction()方法获取到PromptAction对象，再通过该对象调用对应方法

一、导入模块

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

注意这里导入的是PromptAction ，而promptAction导入的是promptAction

promptAction 的导入：
import { promptAction } from '@kit.ArkUI';

 

二、定义一个PromptAction

let promptAction:PromptAction = this.uiContext.getPromptAction();

uiContext的定义

import { PromptAction, UIContext } from '@kit.ArkUI';
 
uiContext : UIContext = this.getUIContext()

 

 

三、showToast

showToast(options: promptAction.ShowToastOptions): void

 

创建并显示文本提示框

1、简单使用：

// UIContext.getPromptAction使用示例
import { PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext() 
  // 显示toast
  showToast(){
    // 获取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    promptAction.showToast({
      message: '提示内容'
    })
  }
  build() {
    Row() {
      Column() {
        Button('toast')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showToast()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

2、ShowToastOptions，文本提示框的选项

1、message，必填

string | Resource类型，显示的文本信息

说明：默认字体为'Harmony Sans'，不支持设置其他字体。

2、duration，非必填

number类型，显示时长（毫秒）

说明：默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。

3、bottom，非必填

string | number类型，设置弹窗底部边框距离导航条的高度

说明：默认值：80vp；ToastShowMode.TOP_MOST模式下，软键盘拉起时，如果bottom值过小，toast要被软键盘遮挡时，会自动避让至距离软键盘80vp处。ToastShowMode.DEFAULT模式下，软键盘拉起时，会上移软键盘的高度。

4、showMode，非必填

ToastShowMode类型，设置弹窗是否显示在应用之上。

说明：默认值：ToastShowMode.DEFAULT，默认显示在应用内。

5、alignment，非必填

Aligment类型，对齐方式。

说明：默认值：undefined，默认底部偏上位置。

6、offset，非必填

Offset类型，在对齐方式上的偏移。

说明：默认值：{dx:0, dy:0}，默认没有偏移。

7、backgroundColor ，非必填

ResourceColor类型，文本提示框背板颜色

说明：默认值：Color.Transparent；当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。

8、textColor ，非必填

ResourcseColor类型，文本提示框文本颜色

说明：默认值：Color.Black

9、backgroundBlurStyle，非必填

BlurStyle类型，文本提示框背板模糊材质

说明：

默认值：BlurStyle.COMPONENT_ULTRA_THICK

设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。

10、shadow，非必填

ShadowOptions | ShadowStyle 类型，文本提示框背板阴影

说明：默认值：ShadowStyle.OuterDefaultMD

 

三、showDialog
不常用，参考文档
 
四、showActionMenu
不常用，参考文档
 
五、openCustomDialog

创建并弹出dialogContent对应的自定义弹窗，使用Promise异步回调。

通过该接口弹出的弹窗内容样式完全按照dialogContent中设置的样式显示，即相当于customdialog设置customStyle为true时的显示效果。

暂不支持isModal = true与showInSubWindow = true同时使用。

openCustomDialog<T extends Object>(dialogContent: ComponentContent<T>, options?: promptAction.BaseDialogOptions): Promise<void>

 

使用示例：

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext()
  // 显示dialog
  showDialog(){
    // 获取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 打开弹框
    promptAction.openCustomDialog(contentNode)
  }
  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({bottom: 36})
  }.backgroundColor('#FFF0F0F0')
}
class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}

 

 

六、closeCustomDialog

关闭已弹出的dialogContent对应的自定义弹窗，使用Promise异步回调。

closeCustomDialog<T extends Object>(dialogContent: ComponentContent<T>): Promise<void>

 

使用示例：

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext()
  // 显示dialog
  showDialog(){
    // 获取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 打开弹框
    promptAction.openCustomDialog(contentNode)

    setTimeout(() => {
      promptAction.closeCustomDialog(contentNode);
    }, 2000);     //2秒后自动关闭
  }
  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({bottom: 36})
  }.backgroundColor('#FFF0F0F0')
}
class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}

 

七、updateCustomDialog

updateCustomDialog<T extends Object>(dialogContent: ComponentContent<T>, options: promptAction.BaseDialogOptions): Promise<void>

更新已弹出的dialogContent对应的自定义弹窗的样式

弹窗样式，目前仅支持更新alignment、offset、autoCancel、maskColor

使用示例：

两秒够更新alignment 使弹框居中显示

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext: UIContext = this.getUIContext()

  // 显示dialog
  showDialog() {
    // 获取PromptAction
    let promptAction: PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 打开弹框
    promptAction.openCustomDialog(contentNode)
    setTimeout(() => {
      promptAction.updateCustomDialog(contentNode,{alignment:DialogAlignment.Center});
    }, 2000); //2秒后自动关闭
  }

  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

class Params {
  text: string = ""

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

 

八、更新弹框内容

setTimeout(() => {
      contentNode.update(new Params("修改内容"))
}, 2000); //2秒后更新组件内容

 

相关文档：ComponentContent

 

九、openCustomDialog，closeCustomDialog另一种使用方式

创建并弹出自定义弹窗。使用Promise异步回调，返回供closeCustomDialog使用的对话框id。暂不支持isModal = true与showInSubWindow = true同时使用。

openCustomDialog(options: promptAction.CustomDialogOptions): Promise<number>

 

关闭自定义弹窗

closeCustomDialog(dialogId: number): void

 

使用示例：

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

@Entry
@Component
struct Index {
  promptAction: PromptAction = this.getUIContext().getPromptAction()
  private customDialogComponentId: number = 0

  @Builder
  customDialogComponent() {
    Column() {
      Text('弹窗').fontSize(30)
      Row({ space: 50 }) {
        Button("确认").onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            this.promptAction.openCustomDialog({
              builder: () => {
                this.customDialogComponent()
              },
              onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                console.log("dialog onWillDismiss")
                if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                  dismissDialogAction.dismiss()
                }
                if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                  dismissDialogAction.dismiss()
                }
              }
            }).then((dialogId: number) => {
              this.customDialogComponentId = dialogId
            })
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

 

posted @ 2024-11-09 08:04  听着music睡  阅读(41)  评论(0)  编辑  收藏  举报