【鸿蒙ArkUI实战开发】基于promptAction全局弹窗

最新推荐文章于 2024-10-12 09:46:16 发布
最新推荐文章于 2024-10-12 09:46:16 发布
阅读量885 收藏 9
点赞数 11
分类专栏： 移动开发 鸿蒙开发 HarmonyOS 文章标签： harmonyos 组件化 鸿蒙开发 移动开发 ArkUI 界面布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CTrup/article/details/142267256
版权
移动开发 同时被 3 个专栏收录
322 篇文章 1 订阅
订阅专栏
鸿蒙开发
322 篇文章 0 订阅
订阅专栏
HarmonyOS
285 篇文章 0 订阅
订阅专栏

往期知识点整理

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

方案

可以使用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%')
  }
}

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

方案

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

场景三：自定义弹窗样式

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

效果图

方案

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

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

效果图.

方案

在自定义组件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})))
} //自定义组件的内容

总是有很多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道需要重点掌握哪些鸿蒙开发知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙开发面试真题（含参考答案）:https://gitcode.com/HarmonyOS_MN/733GH/overview

在这里插入图片描述

OpenHarmony 开发环境搭建

图片

《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview

  • 搭建开发环境
  • Windows 开发环境的搭建
  • Ubuntu 开发环境搭建
  • Linux 与 Windows 之间的文件共享
  • ……
  • 系统架构分析
  • 构建子系统
  • 启动流程
  • 子系统
  • 分布式任务调度子系统
  • 分布式通信子系统
  • 驱动子系统
  • ……

图片

OpenHarmony 设备开发学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview

图片

CTrup
关注
专栏目录
【HarmonyOS NEXT应用开发】案例90：基于promptAction全局弹窗
xzs51job的专栏
08-25 49
onWillDismiss Callback，当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操作时，如果注册该回调函数，则不会立刻关闭弹窗。创建Params类方便开发者进行传参的，开发者可以在@Builder里自定义组件的内容，宽度跟随子节点自适应，圆角为0，弹窗背景色为透明色；可以使用openCustomDialog接口， 创建并弹出dialogContent对应的自定义弹窗，使用Promise异步回调。
HarmonyOS实战开发-实现自定义弹窗
2401_82546228的博客
03-28 1411
本篇Codelab基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗，效果如图所示
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
zy0412326的专栏
02-15 1153
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件。
鸿蒙开发-UI-组件导航-Navigation
中年程序员
02-02 2872
上文详细学习了鸿蒙开发UI页面跳转的相关知识，学习页面路由router基本概念，使用方法，页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景，学习了页面跳转后普通返回和带弹窗的返回使用方法，学习了页面带数据的跳转方式以及目标页面接收数据的方法，本文将学习鸿蒙UI开发组件导航Navigation。
【鸿蒙实战开发】基于Navigation的路由管理
HarmonyOSMN的博客
06-27 4914
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。
鸿蒙(HarmonyOS)组件化路由框架——Navigation的路由管理
lc748258的博客
09-25 1074
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。
HarmonyOS全局弹窗工具类封装demo源码
10-01
此项目提供了一种封装基于 promptAction 接口的全局弹窗方法，旨在简化 HarmonyOS 应用开发中弹窗的创建、显示和关闭过程。通过此工具类，开发者可以方便地创建自定义的弹窗，同时避免了常见的错误，如参数类型错误...
Vue自定义全局弹窗组件操作
10-14
Vue自定义全局弹窗组件操作是一项常见的前端开发任务，它能极大地提高代码的复用性和项目的维护性。在Vue框架中，我们可以通过以下步骤来创建一个全局可调用的弹窗组件。 首先，我们需要创建一个名为`popup.vue`的...
华为鸿蒙Harmony开眼App（项目整体基于Api9+ArkTs+ArkUI）.zip
02-07
【华为鸿蒙HarmonyOS开发】是华为推出的一款面向全场景的分布式操作系统，旨在打破不同设备之间的界限，实现跨平台、跨设备的无缝协同体验。HarmonyOS采用微内核设计，强调安全性、高效率和低延迟，尤其适用于物联网...
鸿蒙开发：Navigation路由组件使用由繁入简
最新发布
知足常乐
10-12 697
无论是静态配置还是动态配置，都有着手动配置的需要，本篇文章就是要解决手动配置，利用路由库和插件实现自动配置的需求。
【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件（Navigation）
热门推荐
时光隧道
12-11 6万+
Navigation组件通常作为页面的根容器，支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
鸿蒙5.0开发进阶：UI框架-组件导航 (Navigation)(推荐)
Androidbye的博客
09-24 1031
Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。
【最新鸿蒙应用开发】——Navigation路由管理
m0_68038853的博客
07-09 1405
一多开发的项目适合使用Navigation进行统一的页面路由管理。Navigation还提供统一的标题栏、工具栏、菜单栏，并且自带导航返回功能。另外，Navigation还支持一些Router不支持的功能，比如：自带的路由拦截功能，自带的沉浸式功能等等。
鸿蒙开发 Navigation push跳转页面
qq_38094466的博客
09-18 287
NavPathStack Navigation跳转
鸿蒙：Navigation的基本使用
m0_46924916的博客
07-22 2927
注：本章只是简单介绍一下其用法，详情请看官方文档：Navigation：文档中心Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。NavRouter ：导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。必须包含两个子组件，其中第二个子组件必须为NavDestination。Nav
HarmonyOS--路由管理--组件导航 (Navigation)
weixin_47808575的博客
06-29 2015
1、Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式2、Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。3、通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果4、在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。
鸿蒙开发笔记(二十二): 页面路由(router),组件导航 Navigation, Tabs
Waruler的博客
01-22 3085
页面路由(router),组件导航 Navigation, Tabs
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值