【最新鸿蒙应用开发】——合理使用自定义弹框

自定义弹窗选型

合理选择不同的系统能力实现弹窗,有利于提升应用开发效率,实现更好的功能需求,因此了解自定义弹窗的选型和差异非常重要。在应用开发中,为了选择出合适的弹窗选型,从使用场景上,需要重点关注以下两点:

  • 弹窗与界面代码解耦

    在开发业务逻辑时,例如遇到一些网络请求失败的场景,需要触发相应的弹窗提醒用户进行操作,由于在任何页面都有可能触发对应的弹窗,此时弹窗不是与某个页面相关联,这个情况下,就需要弹窗与界面的解耦。

  • 弹窗在界面跳转后保留

    在一些权限配置页,用户首次进入应用时会弹出权限配置弹窗,让用户进行操作,此时若点击跳转到隐私详情页面,返回后弹窗需要保留在页面上。

从能力角度,系统提供了四种不同的方式来实现自定义弹窗,分别是CustomDialog、promptAction、UIContext.getPromptAction、Navigation.Dialog,在开发业务时,需要结合每种弹窗的特点来选择弹窗。

  • CustomDialog弹窗,必须在@Component struct内部定义,即在UI层创建控制器,当一个页面需要弹出多个自定义弹窗时,就需要创建对应个数的CustomDialogController,这会造成UI层代码冗余,无法做到弹窗与界面的解耦。

  • promptAction弹窗,为了解决CustomDialog弹窗的问题,支持了UI元素复用机制@Builder,但依赖UI组件。

  • UIContext.getPromptAction弹窗,基于promptAction弹窗演进而来,支持全局自定义弹窗,不依赖UI组件,依赖UIContext,支持在非页面文件中使用,弹窗内容支持动态修改,支持自定义弹窗圆角半径、大小和位置,适合在与页面解耦的全局弹窗、自定义弹窗显示和退出动画等场景下使用。

  • Navigation.Dialog弹窗,基于Navigation路由形式,以Component组件页面存在于路由栈中,以进出栈的方式打开或关闭弹窗,可以实现弹窗与UI界面解耦,默认透明显示,适合在切换页面弹窗不消失场景下使用。

上述四种弹窗的使用区别,可以从是否支持弹窗与界面代码解耦、弹窗在界面跳转后是否保留这两个方面去进行对比,总结如下:

CustomDialogpromptActionUIContext.getPromptActionNavigation.Dialog
弹窗与界面代码解耦不支持不支持支持支持
弹窗在界面跳转后保留

在对解耦要求不高的情况下,可以使用上面CustomDialog、promptAction两个弹窗,本文围绕开发时主要常见的场景和问题,介绍UIContext.getPromptAction、Navigation.Dialog两个弹窗的使用。

用鸿蒙showCustomMsg提示框(标题和内容无法设置样式居中,总结就是一个字:丑!)

static showCustomMsg(title: string, content: string | Resource, confirmBtn?: string, cancelBtn?: string,confirm?: () => void, cancel?: () => void): void {promptAction.showDialog({title: title ?? "提示",message: content,buttons: [{text: cancelBtn ?? "取消",color: "#000000"},{text: confirmBtn ?? "确认",color: "#4169E1"}]}).then(data => {if (data.index == 1) {if (confirm) {confirm()}} else {if (cancel) {cancel()}}})
}

直接使用鸿蒙showCustomMsg弹框在一些场景是可以的,但是局限性比较大,在一些别的场景需要自定义样式,或者就只是简单想让标题和内容居中都是没有提供样式来调整,因此我们可以使用以下弹框来自定义。

一、在原生页面使用自定义弹窗

import Logger from '../common/utils/Logger'
​
@CustomDialog
export struct HMCustomDialog {controller: CustomDialogControllertitle: string | Resource = ''message: string | Resource = ''leftText: string | Resource = ''rightText: string | Resource = ''showLeft: boolean = trueshowRight: boolean = truecancel: () => void = () => {}confirm: () => void = () => {}
​build() {Column() {Text(this.title).fontSize(18).fontColor(Color.Black).fontWeight(800).margin({ top: 10 })
​Text(this.message).fontSize(16).fontColor($r('app.color.font_333333')).margin({ top: 10, bottom: 10 })
​Flex({ justifyContent: FlexAlign.SpaceAround }) {Button(this.leftText).onClick(() => {this.cancel()this.controller.close()}).backgroundColor(0xffffff).fontColor(Color.Gray).visibility(this.showLeft ? Visibility.Visible : Visibility.None)
​Button(this.rightText).onClick(() => {this.confirm()Logger.debug('confirm')this.controller.close()}).backgroundColor(0xffffff).fontColor($r('app.color.font_0086f3')).visibility(this.showRight ? Visibility.Visible : Visibility.None)}.margin({ bottom: 4 })}}
}

在父页面使用

MyDialogController: CustomDialogController = new CustomDialogController({builder: HMCustomDialog({title: '提示',message: '您还没有登录',leftText: '取消',rightText: '去登录',showLeft: true,showRight: true,cancel: () => {},confirm: () => {//去登录WindowUtils.getRouter().pushUrl({ url: 'pages/login/LoginPage' })},}),alignment: DialogAlignment.Center
})
​build() {Column(){Button().onClick(()=>{this.MyDialogController.open()
​})}}
​

二、在非原生页面(如方法中)需要弹出自定义弹窗时

import { ComponentContent } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit';
import { WindowUtils } from '../common/constants/WindowUtils';
import Logger from '../common/utils/Logger';
​
let contentNode: ComponentContent<Content> | undefined
​
export interface Contents {title: stringmessage: stringconfirm?: () => void,leftText?: stringrightText?: string
}
​
export async function H5ShowCustomDialog(content: Contents) {
​let uiContext = WindowUtils.mainWindow.getUIContext();let promptAction = uiContext.getPromptAction();contentNode = new ComponentContent(uiContext, wrapBuilder(customDialogComponent), content);
​try {promptAction.openCustomDialog(contentNode)
​} catch (error) {let message = (error as BusinessError).message;let code = (error as BusinessError).code;Logger.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);}
}
​
export function H5CloseCustomDialog() {let uiContext = WindowUtils.mainWindow.getUIContext();let promptAction = uiContext.getPromptAction();
​try {promptAction.closeCustomDialog(contentNode)} catch (error) {let message = (error as BusinessError).message;let code = (error as BusinessError).code;Logger.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);} finally {contentNode = undefined}
}
​
@Builder
function
customDialogComponent(content: Contents) {Column() {Dialog({content: content,})}.width('65%').height(150).borderRadius(15).justifyContent(FlexAlign.Center).backgroundColor(Color.White)
}
​
@Component
export struct Dialog {content: Contents = {} as Contents
​build() {Column() {Text(this.content.title).fontSize(18).fontColor(Color.Black).fontWeight(700).margin({ top: 10 })
​Text(this.content.message).fontSize(16).fontColor($r('app.color.font_333333')).margin({ top: 10, bottom: 10 })
​//适用于非原生页面的两种提示框,传confirm提供确认和取消键,否则只提供确认键if (this.content.confirm) {Flex({ justifyContent: FlexAlign.SpaceAround }) {Button(this.content.leftText ? this.content.leftText : '取消').onClick(() => {H5CloseCustomDialog()
​}).backgroundColor(0xffffff).fontColor(Color.Gray)
​Button(this.content.rightText ? this.content.rightText : '确定').onClick(() => {if (this.content.confirm) {this.content.confirm()}}).backgroundColor(0xffffff).fontColor($r('app.color.font_0086f3'))}.margin({ bottom: 4 })} else {Button('确定').onClick(() => {H5CloseCustomDialog()
​}).backgroundColor(0xffffff).fontColor($r('app.color.font_0086f3'))}}.justifyContent(FlexAlign.SpaceBetween).width('100%').height('100%')}
}

调用封装好的方法即可

第一种样式

let content: Contents = {title: '提示',message: e,
}
H5ShowCustomDialog(content)

第二种样式

const confirm: () => void = () => {Toolkit.cleanAppCache()H5CloseCustomDialog()
}
let cache = (bundleStats.cacheSize / 1024 / 1024)
let content: Contents = {title: '温馨提示',message: `缓存大小:${cache > 1 ? cache.toFixed(2) + 'MB' : (cache * 1024).toFixed() + 'KB'}`,rightText:'确认清理',confirm: confirm
}
H5ShowCustomDialog(content)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/475073.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

044 商品详情(异步编排)

文章目录 销售属性分组规格参数异步编排application.ymlMyThreadConfig.javaThreadPoolConfigProperties.javaSkuInfoServiceImpl.java 销售属性 sku表&#xff1a;tb_sku_info sku对应销售属性表&#xff1a;tb_sku_sale_attr_value 结果 在详情页系统中&#xff0c;切换属…

【热门主题】000054 ECMAScript:现代 Web 开发的核心语言

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

进程优先级——Linux

目录 前言 查看系统进程 进程优先级的修改 Linux调度与切换 Cpu的进程切换 Linux实现调度的算法 前言 进程访问系统资源要排队等待&#xff0c;而cpu资源分配和执行的先后顺序&#xff0c;就是指进程的优先级。进程的优先级&#xff0c;保证了必要进程的执行。进程访问某…

11.18 Maven-SpringBootWeb入门

Maven 什么是maven? Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&#xff0c;也是一个专门为支持开源项目而生的非盈利性组织…

selenium元素定位校验以及遇到的元素操作问题记录

页面元素定位方法及校验 使用比较多的是通过id、class和xpath来对元素进行定位。在定位前可以现在浏览器验证是否可以找到指定的元素。这样就不用每添加一个元素定位都运行代码来检查定位方式表达式是否正确。 使用XPATH定位 在浏览器F12&#xff0c;找到元素&#xff0c;在元…

【UGUI】Unity 背包系统实现02:道具信息提示与显示

在游戏开发中&#xff0c;背包系统是一个常见的功能模块&#xff0c;用于管理玩家拾取的物品。本文将详细介绍如何在 Unity 中实现一个简单的背包系统&#xff0c;包括道具信息的提示和显示功能。我们将通过代码和场景搭建来逐步实现这一功能。 1. 功能需求清单 在实现背包系…

服务器上部署并启动 Go 语言框架 **GoZero** 的项目

要在服务器上部署并启动 Go 语言框架 **GoZero** 的项目&#xff0c;下面是一步步的操作指南&#xff1a; ### 1. 安装 Go 语言环境 首先&#xff0c;确保你的服务器上已安装 Go 语言。如果还没有安装&#xff0c;可以通过以下步骤进行安装&#xff1a; #### 1.1 安装 Go 语…

Node.js | Yarn下载安装与环境配置

一、安装Node.js Yarn 是 Node.js 下的包管理工具&#xff0c;因此想要使用 Yarn 就必须先下载 Node.js。 推荐参考&#xff1a;Node.js | npm下载安装及环境配置教程 二、Yarn安装 打开cmd&#xff0c;输入以下命令&#xff1a; npm install -g yarn检查是否安装成功&…

【Linux实践2】实验四:存储管理

文章目录 一、存储管理的目的1.1 内存空间的分配与回收1.2 地址转换1.3 内存保护1.4 内存共享1.5 内存扩充 二、可变分区存储管理2.1 分区结构体定义2.2 初始化分区链表 三、内存分配算法实现3.1 首次适应算法&#xff08;First Fit&#xff09;3.1.1 算法实现 3.2 循环首次适应…

linux 中mysql查看慢日志

1、到mysql容器&#xff0c;先登录到数据库&#xff0c;查看是否开启 mysql -h 127.0.0.1 -uroot -p SHOW VARIABLES LIKE slow_query_log; 2、如果没有开启&#xff0c;需要先开启 set global slow_query_log ON; 3、查看慢日志文件 SHOW VARIABLES LIKE slow_query_log…

微服务day09

DSL查询 快速入门 GET /items/_search {"query": {"match_all": {}} } 叶子查询 GET /items/_search {"query": {"match_all": {}} }GET /items/_search {"query": {"multi_match": {"query": "脱…

vue中el-select 模糊查询下拉两种方式

第一种&#xff1a;先获取所有下拉数据再模糊查询&#xff0c;效果如下 1&#xff0c;页面代码&#xff1a;speciesList是种类列表List, speciesId 是speciesList里面对应的id&#xff0c;filterable是过滤查询标签 <el-form-item label"种类" prop"species…

django启动项目报错解决办法

在启动此项目报错&#xff1a; 类似于&#xff1a; django.core.exceptions.ImproperlyConfigured: Requested setting EMOJI_IMG_TAG, but settings are not c启动方式选择django方式启动&#xff0c;以普通python方式启动会报错 2. 这句话提供了对遇到的错误的一个重要线索…

【Redis】Redis实现的消息队列

一、用list实现【这是数据类型所以支持持久化】 消息基于redis存储不会因为受jvm内存上限的限制&#xff0c;支持消息的有序性&#xff0c;基于redis的持久化机制&#xff0c;只支持单一消费者订阅&#xff0c;无法避免消息丢失。 二、用PubSub【这不是数据类型&#xff0c;是…

【AI+教育】一些记录@2024.11.16

《万字长文&#xff0c;探讨关于ChatGPT的五个最核心问题》 万字长文&#xff0c;探讨关于ChatGPT的五个最核心问题关于 ChatGPT 铺天盖地的信息让人无所适从。本文则试图提炼出五个关键问题&#xff1a;如何理解这次范式突破&#xff0c;未来能达到的技术天花板&#xff0c;行…

【计算机网络】TCP协议

一、TCP协议格式 1.报头的含义 (1) 16位源端口号/16位目的端口号 自己的端口号 和 对方的端口号 (2) 4位首部长度 表示报头长度&#xff08;TCP报头总长度 4位首部长度 * 4字节&#xff09;最少有20字节 TCP报头总长度 -> 0000 ~ 1111 -> [0, 15] * 4 -> [0, 60…

http自动发送请求工具(自动化测试http请求)

点击下载《http自动发送请求工具(自动化测试http请求)》 前言 在现代软件开发过程中&#xff0c;HTTP 请求的自动化测试是确保应用程序稳定性和可靠性的关键环节。为了满足这一需求&#xff0c;我开发了一款功能强大且易于使用的自动化 HTTP 请求发送工具。该工具基于 C# 开发…

C++ —— 剑斩旧我 破茧成蝶—C++11

江河入海&#xff0c;知识涌动&#xff0c;这是我参与江海计划的第2篇。 目录 1. C11的发展历史 2. 列表初始化 2.1 C98传统的{} 2.2 C11中的{} 2.3 C11中的std::initializer_list 3. 右值引用和移动语义 3.1 左值和右值 3.2 左值引用和右值引用 3.3 引用延长生命周期…

Leetcode 有效的数独

这段代码解决的是 验证一个数独是否有效 的问题&#xff0c;其算法思想是基于 规则校验和状态记录。具体思想如下&#xff1a; 算法思想 核心目标&#xff1a; 检查每个数字在 同一行、同一列 和 同一个 3x3 子格 中是否重复。 状态记录&#xff1a; 使用 3 个布尔二维数组分别…

STM32设计学生宿舍监测控制系统-分享

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 本项目旨在利用STM32单片机为核心&#xff0c;结合传感器技术、无线通信技…