HarmonyOS4.0从零开始的开发教程12给您的应用添加弹窗

HarmonyOS(十)给您的应用添加弹窗

概述

在我们日常使用应用的时候,可能会进行一些敏感的操作,比如删除联系人,这时候我们给应用添加弹窗来提示用户是否需要执行该操作,如下图所示:

点击放大

弹窗是一种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能,弹窗按照功能可以分为以下两类:

  • 确认类:例如警告弹窗AlertDialog。
  • 选择类:包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等。

您可以根据业务场景,选择不同类型的弹窗。部分弹窗效果图如下:

点击放大

此外,如果上述弹窗还不能满足您的需求,或者需要对弹窗的布局和样式进行自定义,您还可以使用自定义弹窗CustomDialog。

下文将分别介绍AlertDialog 、TextPickerDialog 、DatePickerDialog以及CustomDialog的使用。

警告弹窗

警告弹窗AlertDialog由以下三部分区域构成,对应下面的示意图:

  1. 标题区:为可选的。
  2. 内容区:显示提示消息。
  3. 操作按钮区:用户做”确认“或者”取消“等操作。

点击放大

以下示例代码,演示了如何使用AlertDialog 实现上图所示的警告弹窗。AlertDialog可以设置两个操作按钮,示例代码中分别使用primaryButton和secondaryButton实现了“取消”和“删除”操作按钮,操作按钮可以通过action响应点击事件。

Button('点击显示弹窗').onClick(() => {AlertDialog.show({title: '删除联系人', // 标题message: '是否需要删除所选联系人?', // 内容autoCancel: false, // 点击遮障层时,是否关闭弹窗。alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量primaryButton: {value: '取消',action: () => {console.info('Callback when the first button is clicked');}},secondaryButton: {value: '删除',fontColor: '#D94838',action: () => {console.info('Callback when the second button is clicked');}},cancel: () => { // 点击遮障层关闭dialog时的回调console.info('Closed callbacks');}})})

此外,您还可以使用AlertDialog,构建只包含一个操作按钮的确认弹窗,使用confirm响应操作按钮回调。

AlertDialog.show({title: '提示',message: '提示信息',autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },confirm: {value: '确认',action: () => {console.info('Callback when confirm button is clicked');}},cancel: () => {console.info('Closed callbacks')}}
)

选择类弹窗

选择类弹窗用于方便用户选择相关数据,比如选择喜欢吃的水果、出生日期等等。下面我们以TextPickerDialog和DatePickerDialog为例,来介绍选择类弹窗的使用。

文本选择弹窗

TextPickerDialog为文本滑动选择器弹窗,根据指定的选择范围创建文本选择器,展示在弹窗上,例如下面这段示例代码使用TextPickerDialog实现了一个水果选择弹窗。示例代码中使用selected指定了弹窗的初始选择项索引为2,对应的数据为“香蕉”。当用户点击“确定”操作按钮后,会触发onAccept事件回调,在回调中将选中的值,传递给宿主中的select变量。

@Entry
@Component
struct TextPickerDialogDemo {@State select: number = 2;private fruits: string[] = ['苹果', '橘子', '香蕉', '猕猴桃', '西瓜'];build() {Column() {Button("TextPickerDialog").margin(20).onClick(() => {TextPickerDialog.show({range: this.fruits, // 设置文本选择器的选择范围selected: this.select, // 设置初始选中项的索引值。onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。// 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项this.select = value.index;console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));},onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。console.info("TextPickerDialog:onCancel()");},onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。console.info("TextPickerDialog:onChange()" + JSON.stringify(value));}})})}.width('100%')}
}

效果图如下:

点击放大

日期选择弹窗

下面我们介绍另一种常用的选择类弹窗DatePickerDialog,它是日期滑动选择器弹窗,根据指定的日期范围创建日期滑动选择器,展示在弹窗上。DatePickerDialog的使用非常广泛,比如当我们需要输入个人出生日期的时候,就可以使用DatePickerDialog。下面的示例代码实现了一个日期选择弹窗:

@Entry
@Component
struct DatePickerDialogDemo {selectedDate: Date = new Date("2010-1-1")build() {Column() {Button("DatePickerDialog").margin(20).onClick(() => {DatePickerDialog.show({start: new Date("1900-1-1"), // 设置选择器的起始日期end: new Date("2023-12-31"), // 设置选择器的结束日期selected: this.selectedDate, // 设置当前选中的日期lunar: false,onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调// 通过Date的setFullYear方法设置按下确定按钮时的日期,这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate.setFullYear(value.year, value.month, value.day)console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调console.info("DatePickerDialog:onCancel()")},onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调console.info("DatePickerDialog:onChange()" + JSON.stringify(value))}})})}.width('100%')}
}

效果图如下:

点击放大

自定义弹窗

自定义弹窗的使用更加灵活,适用于更多的业务场景,在自定义弹窗中您可以自定义弹窗内容,构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现,然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。下面我们通过一个兴趣爱好的选择框来介绍自定义弹窗的使用。

点击放大

从上面的效果图可以看出,这个选择框是一个多选的列表弹窗,我们可以使用装饰器@CustomDialog,结合List组件来完成这个弹窗布局,实现步骤如下:

  1. 初始化弹窗数据。

    先准备好资源文件和数据实体类。其中资源文件stringarray.json创建在resources/base/element目录下,文件根节点为strarray。

    {"strarray": [{"name": "hobbies_data","value": [{"value": "Soccer"},{"value": "Badminton"},{"value": "Travelling"},... ]}]
    }
    

    实体类HobbyBean用来封装自定义弹窗中的"兴趣爱好"数据。

    export default class HobbyBean {label: string;isChecked: boolean;
    }
    

    然后创建一个ArkTS文件CustomDialogWidget,用来封装自定义弹窗,使用装饰器@CustomDialog修饰CustomDialogWidget表示这是一个自定义弹窗。使用资源管理对象manager获取数据,并将数据封装到hobbyBeans。

    @CustomDialog
    export default struct CustomDialogWidget {@State hobbyBeans: HobbyBean[] = [];aboutToAppear() {let context: Context = getContext(this);let manager = context.resourceManager;manager.getStringArrayValue($r('app.strarray.hobbies_data'), (error, hobbyResult) => {...hobbyResult.forEach((hobbyItem: string) => {let hobbyBean = new HobbyBean();hobbyBean.label = hobbyItem;hobbyBean.isChecked = false;this.hobbyBeans.push(hobbyBean);});});}build() {...}
    }
    
  2. 创建弹窗组件。

    controller对象用于控制弹窗的控制和隐藏,hobbies表示弹窗选中的数据结果。setHobbiesValue方法用于筛选出被选中的数据,赋值给hobbies。

    @CustomDialog
    export default struct CustomDialogWidget {@State hobbyBeans: HobbyBean[] = [];@Link hobbies: string;private controller: CustomDialogController;aboutToAppear() {...}setHobbiesValue(hobbyBeans: HobbyBean[]) {let hobbiesText: string = '';hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>isCheckItem?.isChecked).map((checkedItem: HobbyBean) => {return checkedItem.label;}).join(',');this.hobbies = hobbiesText;}build() {Column() {Text($r('app.string.text_title_hobbies'))...List() {ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {ListItem() {Row() {Text(itemHobby.label)...Toggle({ type: ToggleType.Checkbox, isOn: false })....onChange((isCheck) => {itemHobby.isChecked = isCheck;})}}}, itemHobby => itemHobby.label)}Row() {Button($r("app.string.cancel_button"))....onClick(() => {this.controller.close();})Button($r("app.string.definite_button"))....onClick(() => {this.setHobbiesValue(this.hobbyBeans);this.controller.close();})}}}
    }
    
  3. 使用自定义弹窗。

    在自定义弹窗的使用页面HomePage中先定义一个变量hobbies,使用装饰器@State修饰,和自定义弹窗中的@Link 装饰器修饰的变量进行双向绑定。然后我们使用alignment和offset设置弹窗的位置在屏幕底部,并且距离底部20vp。最后我们在自定义组件TextCommonWidget(具体实现可以参考《构建多种样式弹窗》Codelab源码)的点击事件中,调用customDialogController的open方法,用于显示弹窗。

    @Entry
    @Component
    struct HomePage {customDialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogWidget({onConfirm: this.setHobbiesValue.bind(this),}),alignment: DialogAlignment.Bottom,customStyle: true,offset: { dx: 0,dy: -20 }});setHobbiesValue(hobbyArray: HobbyBean[]) {...}build() {...TextCommonWidget({...title: $r("app.string.title_hobbies"),content: $hobby,onItemClick: () => {this.customDialogController.open();}})...}
    }
    

参考

关于更多弹窗,您可以参考:

警告弹窗

列表选择弹窗

自定义弹窗

日期滑动选择弹窗

时间滑动选择弹窗

文本滑动选择弹窗

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

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

相关文章

AI全栈大模型工程师(二十八)如何做好算法备案

互联网信息服务算法 什么情况下要备案? 对于B2B业务,不需要备案。 但在B2C领域,一切要视具体情况而定。 如果我们自主训练大型模型,这是必要的。 但如果是基于第三方模型提供的服务,建议选择那些已获得备案并且具有较大…

Python脚本打包

一.Windows操作系统 Python脚本打包 1.cmd窗口执行如下指令:pip install pyinstaller C:\Users\ZhuQing>pip install pyinstaller2.执行以下指令验证pyinstaller是否安装成功(pyinstaller) C:\Users\ZhuQing>pyinstaller3.被打包程序…

frp配置内网穿透步骤

frp配置内网穿透步骤 1.环境准备1.1 云服务器1.2 frp包 2. frp安装2.1 server服务端设置2.2 客户端配置 实现目标通过云服务器ip:8080访问内网电脑启动的web项目localhost:8080 1.环境准备 1.1 云服务器 服务器安装centos7.9, 安全组入口方向开通 7500 7000 8080 8060端口 …

DPDK是什么?DPDK网卡更有优势吗?

近年来,随着数字化的推进,上云成为企业数字化建设的重要指标,用云程度持续深入。可以说,云时代已经来临。 应云而生的DPDK 云时代的一个典型特征,是数据的高速增长。据华为GIV数据,预计2025年全球数据量将…

【力扣】2.两数相加

2.两数相加 这是第二题,还行豁~。 题解: 首先就是对题目的理解。这里你要知道两链表中数字的排列都是逆序的,也就是说示例一中2-4-3他原本的数字应该是342。同理可得下面链表的意思,二者相加所得到的结果也是逆序的,…

基于Java8构建Docke镜像

基于Java8构建Docke镜像 搜索java8安装包 docker search java8 --no-trunc , --no-trunc展开描述信息 选择拉取 docker pull docker.io/mykro/java8-jre,为了减少磁盘占用,选择jre版本基础镜像 在宿主机创建文件夹iot,并把所需…

python笔记(1)安装环境

1,官网下载自己电脑位数的安装包 https://www.python.org/downloads/windows/ install时勾选中add to path,把路径自动添加到环境变量 安装pycharm就不讲了 安装后选中自己的python安装包 file-> setting->project:yourprojectname ->pyt…

FastAPI之请求头

请求头 FastAPI是一个现代、快速(高性能)、异步的Python Web框架,用于构建RESTful APIs。它基于标准的Python类型提示,并且可以生成交互式的API文档。 在本教程中,我们将学习如何使用FastAPI处理请求头(H…

【详解优先级队列(堆)】

目录 堆的概念 堆的性质 堆的存储方式 堆的创建 堆的向下调整 向下过程(以小堆为例) 向下过程(以大堆为例) 建堆的时间复杂度O(n) 堆的插入与删除 堆的插入 向上调整建堆的时间复杂度O(nlogn) 堆的删除 常见习题 常用接口介绍 PriorityQueue的特性 Pri…

成功的云转型之路需要考虑的基本因素

云计算如今已经变得无处不在,并显著影响着日常生活的各个方面。然而,重要的是要注意云计算技术是不断发展的。最近向远程工作的转变促使企业加快数字化转型,更多地采用云计算服务。 即使在新冠疫情消退之后,云计算技术的采用也获得…

在虚拟机的Windows操作系统中:通过Jar方式若依项目,以及在外部的访问!

📚📚 🏅我是默,一个在CSDN分享笔记的博主。📚📚 ​​ 🌟在这里,我要推荐给大家我的专栏《Windows》。🎯🎯 🚀无论你是编程小白,还是有…

IDEA之设置主题风格为eclipse风格

设置IDEA的主题风格为eclipse风格,步骤如下: 1.选择File->Settings 2.选择 Plugins 3.搜索 eclipse theme,注意是红框里的,点击 install 下载后就会自动设置这个主题 4.你也可以去修改主题,选择 Appearance,设置th…

jdk+zookeeper+kafka 搭建kafka集群

环境资源包: jdk-8u341-linux-x64.tar.gz kafka_2.12-2.2.0.tgz zookeeper-3.4.14.tar.gz 一、安装jdk 因为kafka需要Java环境,所以优先配置jdk环境,若已经配置了java环境,此步骤可以忽略 [rootVM-120-2-centos ~]# tar -xvf j…

对比SPI、UART、I2C通信的区别与应用

SPI、UART、I2C通信是常用的数字通信协议,它们在不同的场景下有不同的应用。下面,我将分别介绍它们的特点、区别与应用。 SPI通信 SPI通信是一种串行同步通信协议,它的全称为“Serial Peripheral Interface”。SPI通信是一种单主多从的通信方…

【FPGA/verilog -入门学习6】verilog频率计数器

需求 在使能信号控制下,计算输入脉冲的每两个上升沿之间的时钟周期数并输出,即输出脉冲频率的计数值 输入信号 周期性脉冲信号:需要做检测的脉冲频率信号 使能信号:高电平进行频率计数,低电平清零计数器 输出信号 计数…

【UE】制作物体逐渐溶解消失并且可以复原的效果

效果 步骤 1. 新建一个工程,创建一个Basic关卡,添加第三人称游戏和初学者内容包资源到内容浏览器 2. 找到并打开初学者内容包中椅子的材质“M_Chair” 将混合模式改为“已遮罩” 在材质图表中添加如下节点 此时我们就可以通过参数“FadeAmount”来控制…

Debian openmediavault 自建Nas系统共享,raid5与btrfs文件系统无损原数据扩容

一、适用环境 1、企业自有物理专业服务器,一些敏感数据不外流时,使用openmediavault自建NAS系统; 2、在虚拟化环境中自建NAS系统,用于内网办公,或出差外网办公时,企业内的文件共享; 3、虚拟化环…

AutoGen多代理对话项目示例和工作流程分析

在这篇文章中,我将介绍AutoGen的多个代理的运行。这些代理将能够相互对话,协作评估股票价格,并使用AmCharts生成图表。 我们创建对话的目的是要求代理分析特定公司的股票价格,并制作股票价格图表。 为了实现这一目标,…

Unity | Shader基础知识(第一集:unity中最简单的shader)

一、unity的shader unity写的shader并不是真正意义上的shader。 简单解释:真正的shader语言写起来还是麻烦的,unity希望大家写起来简单一点,于是在原来的基础上,给大家优化了一个语言,叫shaderLab,所以我…

四、编写第一个 Shell 脚本

一、编写 Shell 脚本内容 打开文本编辑器(可以使用 vi/vim 命令来创建文件),新建一个文件 chaoqing.sh,扩展名为 sh (sh 表示 shell),扩展名不影响脚本的运行。 输入一些代码,如下…