首页 > 其他分享 >学习笔记（三十）：ArkUi-UIContext.getPromptAction(弹窗)

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

时间：2024-11-09 08:47:57浏览次数：1  
标签：uiContext UIContext promptAction text PromptAction getPromptAction ArkUi 弹窗

概述：

基于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%')
  }
}

 

标签：uiContext,UIContext,promptAction,text,PromptAction,getPromptAction,ArkUi,弹窗
From： https://www.cnblogs.com/xqxacm/p/18534726

相关文章

  • 学习笔记（二十八）：ArkUi-自定义弹窗 (CustomDialog)
    概述：CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗一、创建自定义弹框1、使用@CustomDialog装饰器装饰自定义弹窗，可在此装饰器内自定义弹窗内容//自定义弹框内容@CustomDialogst......
  • 学习笔记（二十七）：ArkUi-警告弹窗（AlertDialog）
    概述：警告弹窗，需要向用户提问或得到用户的许可。警告弹窗用来提示重要信息，但会中断当前任务，尽量提供必要的信息和有用的操作。避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。必选内容包含：标题、可选信息文本、最多3个按钮。可选内容包含：输入框、icon......
  • arkUI：Column和Rom的间距设置（列向，横向）
    arkUI：Column和Rom的间距设置（列向，横向）1主要内容说明2相关内容举例和说明2.1Column的间距（列的间距）2.1.1源码1（Column的间距）2.1.2源码1运行效果2.2Row的间距（横向间距）2.2.1源码2（Row的间距）3.结语4.定位日期1主要内容说明Column：垂直布局组件，子组件从上到下依次......
  • 鸿蒙HarmonyOS(ArkUI基础-3）
    文章目录ArkUI（方舟UI框架）1.简介2.基本概念3.概述4.布局1.概述......
  • 学习笔记（二十五）：ArkUi-栅格布局 (GridRow/GridCol)
    概述：栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格......
  • 学习笔记（二十四）：ArkUi-网格 (Grid/GridItem)
    概述：网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem，用于构建......
  • arkUI：文本框、文本域的创建和常见用法（TextInput 、TextArea）
    arkUI：文本框、文本域的创建和常见用法（TextInput、TextArea）1主要内容说明2例子2.1文本框、文本域的创建（TextInput、TextArea）2.1.1源码1（文本框、文本域的创建）2.1.2源码1运行效果2.2设置文本框的输入类型2.2.1源码2（设置输入框的输入类型）2.2.2源码2运行效果2.3......
  • ArkUI常用数据处理：掌握Map操作与动态数据管理
    在HarmonyOS应用开发中，ArkUI框架提供了丰富的数据处理能力，尤其是对于Map这类非线性容器的操作。本文将详细介绍ArkUI中Map的基本概念、操作方法，以及如何在实际开发中应用Map进行数据处理和动态数据管理。Map的重要性Map是非线性容器的一种，它提供了快速查找、插入和删除键值......
  • ArkTS鸿蒙页面（ArkUI-X Empty Ability）
    1.基础1.1.存储变量，常量lettitle:string='巨无霸汉堡'console.log('字符串title',title)//1.2数字number类型letage:number=18console.log('年纪age',age)//1.3布尔boolean类型(true真，false假)letisLogin:boolean=falseconsole.log(&#......
  • 学习笔记（十七）：ArkUi-气泡提示 (Popup)
    概述：Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。一、系统气泡，PopupOptions通过配置primaryButton、secondaryButton来设置带按钮的气泡 1、文本气泡常用于只展示带有文本的信息提示，不带有任何......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99