鸿蒙开发5.0【基于promptAction全局弹窗】

于 2024-08-30 18:21:54 发布
阅读量384 收藏 8
点赞数 5
分类专栏： 鸿蒙 文章标签： harmonyos 鸿蒙开发 鸿蒙 openharmony ArkUI 程序员 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76813281/article/details/141723949
版权

场景一：创建并显示全局自定义弹窗

1

方案

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

创建Params类方便开发者进行传参的，开发者可以在@Builder里自定义组件的内容，宽度跟随子节点自适应，圆角为0，弹窗背景色为透明色；

let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message))

上述代码中uiContext代表上下文，wrapBuilder(buildText)代表自定义节点，new Params(this.message)代表传参。

核心代码

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}//传参

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({bottom: 36})
    }.backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

@Entry
@Component
struct Index {
  @State message: string = "显示TOAST"

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));//上下文、自定义节点、传参
            try {
              promptAction.openCustomDialog(contentNode);
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            };
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}//传参

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({bottom: 36})
    }.backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

@Entry
@Component
struct Index {
  @State message: string = "显示TOAST"

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));//上下文、自定义节点、传参
            try {
              promptAction.openCustomDialog(contentNode);
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            };
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

场景二：全局弹窗拦截返回并监听返回事件

2

方案

onWillDismiss Callback，当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操作时，如果注册该回调函数，则不会立刻关闭弹窗。在回调函数中可以通过reason得到阻拦关闭弹窗的操作类型，从而根据原因选择是否能关闭弹窗。

名称描述
PRESS_BACK点击三键back、左滑/右滑、键盘ESC。
TOUCH_OUTSIDE点击遮障层时。
CLOSE_BUTTON点击关闭按钮。

当前组件返回的reason中，暂不支持CLOSE_BUTTON的枚举值。

核心代码

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""

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

@Builder
function buildText(params: Params) {
  Row() {
    Column() {
      Text(params.text)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .padding(8)
      Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .padding({ left: 14, right: 14 })
        .margin({ top: -4 })
      Row({ space: 64 }) {
        Button("不允许")
          .onClick(() => {
            let link1: SubscribedAbstractProperty<number> = storage.link('PropA');
            let numsss = link1.get()
            console.log('nums', link1.get())
            link1.set(++numsss)
          })

        Button("允许")
      }
      .padding(24)
    }
    .width("90%")
    .borderRadius(8)
    .backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

let para: Record<string, number> = { 'PropA': 1 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化

@Entry(storage)
@Component
struct Index {
  @State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
  @LocalStorageLink('uiContext') aaa: UIContext = this.getUIContext();
  @LocalStorageLink('PropAA') shjsh: ComponentContent<Params> | null = null
  @LocalStorageLink('PropA') @Watch('onchang') nums: number = 0;

  onchang() {
    try {
      this.aaa.getPromptAction().closeCustomDialog(this.shjsh);
    } catch (error) {
      let message = (error as BusinessError).message;
      let code = (error as BusinessError).code;
      console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
    }
  }

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode =
              new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); // 上下文、自定义节点、传参
            this.shjsh = contentNode
            try {
              promptAction.openCustomDialog(contentNode,
                {
                  onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                    console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                    console.log("dialog onWillDismiss")
                  }
                });
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            }
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""

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

@Builder
function buildText(params: Params) {
  Row() {
    Column() {
      Text(params.text)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .padding(8)
      Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .padding({ left: 14, right: 14 })
        .margin({ top: -4 })
      Row({ space: 64 }) {
        Button("不允许")
          .onClick(() => {
            let link1: SubscribedAbstractProperty<number> = storage.link('PropA');
            let numsss = link1.get()
            console.log('nums', link1.get())
            link1.set(++numsss)
          })

        Button("允许")
      }
      .padding(24)
    }
    .width("90%")
    .borderRadius(8)
    .backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

let para: Record<string, number> = { 'PropA': 1 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化

@Entry(storage)
@Component
struct Index {
  @State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
  @LocalStorageLink('uiContext') aaa: UIContext = this.getUIContext();
  @LocalStorageLink('PropAA') shjsh: ComponentContent<Params> | null = null
  @LocalStorageLink('PropA') @Watch('onchang') nums: number = 0;

  onchang() {
    try {
      this.aaa.getPromptAction().closeCustomDialog(this.shjsh);
    } catch (error) {
      let message = (error as BusinessError).message;
      let code = (error as BusinessError).code;
      console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
    }
  }

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode =
              new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); // 上下文、自定义节点、传参
            this.shjsh = contentNode
            try {
              promptAction.openCustomDialog(contentNode,
                {
                  onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                    console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                    console.log("dialog onWillDismiss")
                  }
                });
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            }
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

场景三：自定义弹窗样式

样式一：渐隐渐显的方式弹出

效果图

3

方案

promptAction.openCustomDialog接口，弹窗的样式相当于customdialog设置customStyle为true时；此时弹窗的样式完全按照dialogContent中设置的样式显示，完全由开发者自己来定义。

核心代码

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""

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

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .padding(8)
      Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .padding({ left:14,right:14})
        .margin({top:-4})
      Row({space:64}){
        Button("不允许")
        Button("允许")
      }
      .padding(24)
    }
    .width("90%")
    .borderRadius(8)
    .backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

@Entry
@Component
struct Index {
  @State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode =
              new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); //上下文、自定义节点、传参
            try {
              promptAction.openCustomDialog(contentNode);
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            }
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""

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

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .padding(8)
      Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .padding({ left:14,right:14})
        .margin({top:-4})
      Row({space:64}){
        Button("不允许")
        Button("允许")
      }
      .padding(24)
    }
    .width("90%")
    .borderRadius(8)
    .backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

@Entry
@Component
struct Index {
  @State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode =
              new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); //上下文、自定义节点、传参
            try {
              promptAction.openCustomDialog(contentNode);
            } catch (error) {
              let message = (error as BusinessError).message;
              let code = (error as BusinessError).code;
              console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
            }
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

样式二：由下往上的方式弹出

效果图.

4

方案

在自定义组件Builder里添加组件内转场动画（transition），设置组件转场时的平移效果和纵向的平移距离。

核心代码

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .padding(8)
      Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .padding({ left:14,right:14})
        .margin({top:-4})
      Row({space:64}){
        Button("不允许")
        Button("允许")
      }
      .padding(24)
    }
    .width("90%")
    .borderRadius(8)
    .backgroundColor('#FFF0F0F0')
  }
  .height("100%")
  .visibility(800)
  // 定义进场出场转场动画效果
  .transition(TransitionEffect.OPACITY.animation({duration: 800}).combine(TransitionEffect.translate({y: 100})))
} //自定义组件的内容

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：
1

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

2

为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！
3

爱桥代码的程序媛
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为设备升级5.0鸿蒙系统名单曝光.zip
12-16
最近曝光的华为设备升级5.0鸿蒙系统的名单，意味着一大波华为用户即将享受到这一最新系统的魅力。本文将详细介绍鸿蒙 HarmonyOS 5.0 的特性以及升级名单中的设备信息。 一、鸿蒙 HarmonyOS 5.0 系统新特性 1. **...
鸿蒙HarmonyOS壁纸，万物皆鸿蒙（无水印版）.rar
06-20
鸿蒙HarmonyOS是华为公司开发的一款面向全场景的分布式操作系统，旨在打破设备间的界限，实现万物互联。这款操作系统的设计理念源于中国古代哲学中的"鸿蒙"概念，寓意着开创一切的原始状态，象征着系统能够无缝连接...
鸿蒙开发5.0【通过子线程实现全局弹窗】
2301_76813281的博客
08-18 974
当应用需要对网络状态进行长期管理监控时，当网络不好时弹窗提示用户当前网络状态差，或者网络连接中断时需要弹窗提示用户网络断开、任务异常终止等。
鸿蒙5.0开发【鸿蒙自定义 Dialog 的 6 种方式】
2401_82772199的博客
08-05 966
自定义弹窗的最常规方式就是通过 CustomDialogController 类去控制显示自定义的弹窗或者浮层。
鸿蒙5.0【OpenHarmony】鸿蒙弹窗实现乱象？带你玩转正确的实现姿势
2401_82772199的博客
08-27 530
最近看到很多童鞋吐槽鸿蒙自定义弹窗的实现，也有不少童鞋提供了各式各样的低耦，轻巧方向的优化方案，但多数参差不齐，甚至有基于老API(白玩，以后还得废弃掉...)给的方案，为避免如此“乱象”遂提出正确的实现姿势。
【HarmonyOS实战开发】鸿蒙中实现组件化通信解耦
HarmonyOS_666的博客
07-26 913
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙Studio5.0下载模拟器
08-19
鸿蒙操作系统（HarmonyOS）由华为开发，是一个全场景分布式OS，旨在提供跨多种设备的无缝体验。鸿蒙Studio是为开发者提供的集成开发环境（IDE），用于开发鸿蒙应用。鸿蒙Studio 5.0是该IDE的最新版本，提供了许多新...
基于 WinCE 5.0 的 zenOn HMI 开发.pdf
03-23
本文件档详细介绍了如何基于WinCE 5.0操作系统进行zenOn HMI的开发过程。 首先，zenOn软件能够与Beckhoff的CX系列控制器或PanelPC等WinCE嵌入式控制器配合使用，同时也兼容NT/XP/2000系统。与一般的组态软件相比，...
鸿蒙（ Beta5.0版）开发实战：自定义TabBar页签
weixin_55362248的博客
08-29 441
依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。
鸿蒙Harmony开发：OHPM包适配管理工具
weqwe6668的博客
08-25 1067
在DevEco Studio 3.1 Release及更高版本上新建API 9及以上版本的工程将使用ohpm作为默认包管理器。
瑞芯微RK3566开发板USB OTG模式介绍及命令切换，触觉智能EVB3566主板鸿蒙硬件厂商
Industio_CSDN的博客
08-29 281
device模式下拔插usb将会进入host模式，需要使用命令重新进入device模式才能继续进行调试。为u盘等设备供电，不可以进行调试，连接adb或者烧录等操作。可以进行调试，连接adb或者烧录等操作，即USB OTG。USB OTG 支持host 和device 模式的切换。不同设备的USB OTG接口位置需要看对应设备的说明文档。上电前，使用USB 数据线，连接主板和PC。上电前，插着U盘或者未接USB设备。上电后默认为device模式。上电后默认作为host模式。
HarmonyOs应用权限申请，system_grant和user_grant区别。本文附头像上传申请user-grant权限代码示例
s_407的博客
08-24 1189
user_grant权限授权要基于用户可知可控的原则，需要应用在运行时主动调用系统动态申请权限的接口，系统弹框由用户授权，用户结合应用运行场景的上下文，识别出应用申请相应敏感权限的合理性，从而做出正确的选择。user_grant指的是用户授权类型，在该类型的权限许可下，应用被允许访问的数据将会涉及到用户或设备的敏感信息，应用被允许执行的操作可能对系统或者其他应用产生严重的影响。系统不鼓励频繁弹窗打扰用户，如果用户拒绝授权，将无法再次拉起弹窗，需要应用引导用户在系统应用“设置”的界面中手动授予权限。
【HarmonyOS NEXT开发】鸿蒙开发环境准备，ArkTS基础语法入门
最新发布
Byyyi耀的博客
08-29 551
【HarmonyOS NEXT开发】鸿蒙开发环境准备，ArkTS基础语法入门
HarmonyOS鸿蒙开发（ Beta5版）Navigation组件常规加载与动态加载
weixin_55362248的博客
08-29 813
开发者使用Navigation组件时，通常会在主页引入子页面组件，在按钮中添加方法实现跳转。下述代码展示常规加载示例，通过import引入子组件。
Windows电脑如何搭建HarmonyOS NEXTDeveloper Preview2环境
yuanlaile的博客
08-29 677
Windows电脑如何搭建HarmonyOS NEXTDeveloper Preview2环境，Windows电脑搭建HarmonyOS NEXTDeveloper Preview2环境详解，一看就会了。
【HarmonyOS】鸿蒙应用蓝牙功能实现 （三）
我的小窝
08-25 1047
鸿蒙应用蓝牙配对，蓝牙扫描，蓝牙权限处理，蓝牙开启和关闭
【鸿蒙学习】HarmonyOS应用开发者高级认证 - 认证通过（附题目）
一个不断前行的程序者
08-29 1209
经过几日的休整，我终于再次挑战高级认证，并以82分的成绩堪堪越过了及格线。然而，通过考试后我惊讶地发现，原来顺利过关的人数如此众多。我逐一攻克了所有基础题目，却发现随着基础题的刷过，同行的考生越来越少，而开发者认证的人数却在不断攀升。不禁笑出声来，原来我也是通过搜题才得以通关的一员！这让我想起了《黑神话 · 悟空》和西游记的故事，没有历经重重关卡，取得的胜利似乎总是少了那么一丝满足感。在获得高级证书之后，我终于解锁了华为应用发布的权限。或许，许多人正是为了这一刻而奋斗。
鸿蒙Harmony开发实战：自定义圆形组件-Canvas
weqwe6668的博客
08-28 288
对比之前自己在其他程序开发中自定义组件的思路，首先寻找父组件Image和Component相关的Api，看看是否具备OnDraw方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值