【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件

简介

弹窗是移动应用中常见的一种用户界面元素,常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用,除此之外还支持自定义弹窗,来满足各种不同的需求。


下面是所有涉及到的弹窗组件官方文档,请一切以官方文档为准

警告对话弹框 官方文档

操作列表弹框 官方文档

文本滑动选择器弹窗 官方文档

日期滑动选择期弹窗 官方文档

时间滑动选择器弹窗 官方文档

自定义弹窗 官方文档


消息提示

概述

Toast(消息提示),常用于显示一些简短的消息或提示,一般会在短暂停留后自动消失。具体效果如下
在这里插入图片描述

使用说明

可使用@ohos.promptAction模块中的showToast()方法显示Toast提示,使用时需要先导入@ohos.promptAction模块,如下

import promptAction from '@ohos.promptAction'

showToast()方法的参数定义如下

showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})

message
message属性用于设置提示信息

duration
duration属性用于设置提示信息停留时长,单位为毫秒,取值范围是[1500,10000]

bottom
bottom属性用于设置提示信息到底部的距离

示例

import promptAction from '@ohos.promptAction';@Entry
@Component
struct ToastPage {build() {Column() {Button('提示信息').onClick(() => {promptAction.showToast({message: '网络连接已断开',duration: 2000,bottom: 50});})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

警告对话框

概述

AlertDialog(警告对话框)用于向用户发出警告或确认操作的提示,确保用户在敏感操作前进行确认。具体效果如下
在这里插入图片描述
可使用全局方法AlertDialog.show()显示警告对话框,具体用法可参考相关案例或者官方文档。

下面给出一个案例

@Entry
@Component
struct AlertDialogPage {build() {Column() {Button('删除').backgroundColor(Color.Red).onClick(() => {AlertDialog.show({title: '删除该记录?', //弹窗标题message: '删除后无法恢复,您确认要删除吗?', //弹窗信息autoCancel: true, //点击遮障层时,是否关闭弹窗alignment: DialogAlignment.Bottom, //弹窗位置offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量primaryButton: { //主要按钮,位于左侧value: '确认', //按钮内容fontColor: Color.Red, //字体颜色action: () => { //点击回调console.log('确认删除')}},secondaryButton: { //次要按钮,位于右侧value: '取消',action: () => {console.log('取消删除')}},cancel: () => { //点击遮罩层取消时的回调console.info('Closed callbacks')}})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

操作列表弹框

概述

ActionSheet(操作列表弹窗)用于提供一组选项给用户选择,用户从中选择后,可执行相应的操作。具体效果如下
在这里插入图片描述

使用说明

可使用全局方法ActionSheet.show()显示操作列表弹窗,具体用法可参考相关案例或者官方文档。

下面给出一个案例参考

@Entry
@Component
struct ActionSheetPage {build() {Column() {Button('选择操作').onClick(() => {ActionSheet.show({title: '文件操作', //弹窗标题message: '请选择你要对该文件执行的操作', //弹窗内容autoCancel: true, //点击遮障层时,是否关闭弹窗alignment: DialogAlignment.Bottom, //弹窗位置offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量confirm: { //底部按钮value: '取消', //按钮文本内容action: () => { //按钮回调函数console.log('点击按钮取消')}},// cancel: () => { //点击遮障层关闭弹窗时的回调//   console.log('点击遮障层取消')// },sheets: [ //操作选项列表{icon: $r('app.media.icon_copy'), //图标title: '复制', //文本action: () => { //回调console.log('复制文件')}},{icon: $r('app.media.icon_cut'),title: '剪切',action: () => {console.log('剪切文件')}},{icon: $r('app.media.icon_delete'),title: '删除',action: () => {console.log('删除文件')}}]})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

选择器弹窗

概述

选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗,例如文本选择器、日期选择器、时间选择器等等,各选择器效果如下

TextPickerDialog(文本滑动选择器弹窗)
在这里插入图片描述
给出一个案例

@Entry
@Component
struct TextPickerDialogPage {fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']@State selectedIndex: number = 0build() {Column({ space: 50 }) {Text(this.fruits[this.selectedIndex]).fontWeight(FontWeight.Bold).fontSize(30)Button("选择文本").margin(20).onClick(() => {TextPickerDialog.show({range: this.fruits, //设置文本选择器的选择范围selected: this.selectedIndex, //设置选中的索引onAccept: (value: TextPickerResult) => { //确定按钮的回调函数this.selectedIndex = value.index;},onCancel: () => { //取消按钮的回调函数console.info('取消选择')},onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数console.info(`当前文本:${JSON.stringify(value)}`)}})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

DatePickerDialog(日期滑动选择期弹窗)
在这里插入图片描述
给出一个案例

@Entry
@Component
struct DatePickerDialogPage {@State date: Date = new Date("2010-1-1");build() {Column({ space: 50 }) {Text(`${this.date.getFullYear()}${this.date.getMonth() + 1}${this.date.getDate()}`).fontWeight(FontWeight.Bold).fontSize(30)Button("选择日期").margin(20).onClick(() => {DatePickerDialog.show({start: new Date("2000-1-1"), //设置选择器的其实日期end: new Date("2100-12-31"), //设置选择器的结束日期selected: this.date, //设置当前选中的日期onAccept: (value: DatePickerResult) => { //确定按钮的回调this.date.setFullYear(value.year, value.month, value.day)},onCancel: () => { //取消按钮的回调console.info('取消选择')},onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数console.info(`当前日期:${JSON.stringify(value)}`)}})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

TimePickerDialog(时间滑动选择器弹窗)
在这里插入图片描述
给出一个案例

@Entry
@Component
struct TimePickerDialogPage {@State time: Date = new Date('2020-01-01T00:00:00')build() {Column({ space: 50 }) {Text(`${this.time.getHours()}:${this.time.getMinutes()}`).fontWeight(FontWeight.Bold).fontSize(30)Button("选择时间").margin(20).onClick(() => {TimePickerDialog.show({selected: this.time, //设置当前选中的时间useMilitaryTime: true, //是否使用24小时制onAccept: (value: TimePickerResult) => { //确认按钮的回调this.time.setHours(value.hour, value.minute);},onCancel: () => { //取消按钮的回调console.info('取消选择')},onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数console.info(`当前时间:${JSON.stringify(value)}`)}})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

使用说明

具体用法可参考相关案例或者官方文档,各选择器的官方文档地址如下
类型 文档地址

TextPickerDialog(文本滑动选择器弹窗) 官方文档

DatePickerDialog(日期滑动选择期弹窗) 官方文档

TimePickerDialog(时间滑动选择器弹窗) 官方文档


自定义弹窗

概述

当现有组件不满足要求时,可考虑自定义弹窗,自定义弹窗允许开发者自定义弹窗内容和样式。例如
在这里插入图片描述
给出一个示例

@Entry
@Component
struct CustomDialogPage {@State answer: string = '?'controller: CustomDialogController = new CustomDialogController({builder: TextInputDialog({confirm: (value) => {this.answer = value;}}),alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -30 }})build() {Column({ space: 50 }) {Row() {Text('1+1=').fontWeight(FontWeight.Bold).fontSize(30)Text(this.answer).fontWeight(FontWeight.Bold).fontSize(30)}Button('作答').onClick(() => {this.controller.open();})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}@CustomDialog
struct TextInputDialog {controller: CustomDialogController = new CustomDialogController({ builder: TextInputDialog() })confirm: (value: string) => void;value: string = '';build() {Column({ space: 20 }) {Text('请输入你的答案')TextInput({ placeholder: '请输入数字' }).type(InputType.Number).onChange((value) => {this.value = value;})Row({ space: 50 }) {Button('取消').onClick(() => {this.controller.close();})Button('确认').onClick(() => {this.confirm(this.value);this.controller.close();})}}.padding(20)}
}

使用说明
显示自定义弹窗需要使用CustomDialogController,具体用法可参考相关案例或者官方文档。

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

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

相关文章

华为认证报名多少钱?

首先,我们来看看HCIA考试费用。HCIA是华为认证的基础级别,主要面向初学者和刚入行的新人。根据官方规定,HCIA的考试报名费为200美金。这个费用相对较低,适合那些希望在经济压力较小的情况下,初步了解华为技术和认证体系…

CSS 浮动

浮动 在标准流当中,元素或者标签在页面上摆放的时候会出现不如意的地方。要想解决这些问题可以采用脱离标准流的方式来进行解决这些问题,脱离标准流也称为脱离文档流。 脱离标准流的解决方式有三种,一种是浮动,另外一种是固定定位…

如何读懂磁滞回曲线(磁化曲线、退磁曲线、内禀曲线)

硬磁性材料,如钕铁硼磁钢,有两个显著特征,一是在外磁场作用下能被强烈磁化,另一个是磁滞,即撤走外磁场后硬磁材料仍保留磁化状态,下图为硬磁材料的磁感应强度B与磁化场强度H之间的关系曲线。 当磁场按Hs→H…

算法——贪心

「贪心的本质是选择每一阶段的局部最优,从而达到全局最优」 贪心无套路 1. 分发饼干 贪心策略: (1)局部最优就是大饼干喂给胃口大的,充分利用饼干尺寸喂饱一个,全局最优就是喂饱尽可能多的小孩 &#xff08…

Linux chapter1 常用命令 cp

note 1 : netstat、curl、ip、nmap、dig 这些都是常用的网络诊断工具,它们的全称如下: netstat:Network Statistics,网络统计,用于显示网络连接,路由表,网络接口统计等网络信息。curl&#xf…

Kali Linux 更换优质国内源

文章目录 环境说明1 Kali Linux 源简介2 Kali Linux 更换国内源 环境说明 操作系统:kali-linux-2024.1-installer-amd64 1 Kali Linux 源简介 所谓的 Kali Linux 源,你可以将它理解为软件仓库,系统通过它安装和更新软件;源的服务…

nodeJs 学习

常用快捷键 二、fs模块 回调函数为空,则表示写入成功! 练习 const fs require(fs); fs.readFile(../files/成绩.txt, utf-8, (err, dataStr) > {if (err) {console.log(读取失败);return err;}console.log(读取成功);const arr dataStr.split( )co…

RPC 和 序列化

RPC 1 RPC调用流程 1.1 clerk客户端调用远程服务 Clerk::PutAppend() raftServerRpcUtil::PutAppend() raftServerRpcUtil是client与kvserver通信的入口, 包含kvserver功能的一对一映射:Get/PutAppend,通过stub对象——raftKVRpcProctoc:…

docker compose部署opensearch集群

docker compose 配置 假设有两台电脑 A电脑的ip为192.168.1.100 B电脑的ip为192.168.1.103 A电脑的docker compose 配置 version: 3services:opensearch:image: opensearchproject/opensearch:2.1.0container_name: opensearch-node-1environment:- cluster.nameopensearch-c…

web前端之实现复选功能、repeat

MENU 1、原生实现1.1、html部分1.2、JavaScript部分1.3、css部分1.4、效果图 2、uniApp实现2.1、html部分2.2、JavaScript部分2.3、css部分2.4、效果图 1、原生实现 1.1、html部分 暂时为null,后续会补充。1.2、JavaScript部分 暂时为null,后续会补充…

算法第二十九天-森林中的兔子

森林中的兔子 题目要求 解题思路 重点:某个兔子回答x的时候,那么数组中最多循序x1个同花色的兔子同时回答x 我们可以通过举例子得出一下的规律: 我们统计数组中所有回答x的兔子的数量n: 若n%(x1)0,说明我们此时只需…

Vector[C++]

文章目录 C中的std::vector简介std::vector的特点std::vector的重要接口用法介绍1. 初始化vector 2. 添加元素push_backemplace_back 3. 访问元素operator[]back 4. 修改元素operator 5. 遍历三种,下标,迭代器,范围for 6. 容量和大小sizeempt…

Induction or tail-recursion

选择排序 遍历整个待排序的数组,从第一个元素开始。在未排序的部分中,找到最小(或最大)的元素,并将其与第一个元素交换位置。接着从第二个元素开始,重复步骤2,直到所有元素都被排序 迭代版 递…

adb常用相关命令行

* 查看设备 adb devices ps这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 若有多台安卓设备&#xff0c;可以通过在adb后面加上 -s <设备id> 对指定设备进行装包、卸载等操作 *启动adb adb start-server *关闭adb adb kill-serve…

Qt实现简单的五子棋程序

Qt五子棋小程序 Qt五子棋演示及源码链接登陆界面单机模式联机模式联网模式参考 Qt五子棋 参考大佬中国象棋程序&#xff0c;使用Qt实现了一个简单的五子棋小程序&#xff0c;包含了单机、联机以及联网三种模式&#xff1b;单机模式下实现了简易的AI&#xff1b;联机模式为PtoP…

[数据集][目标检测]铁路工人工服安全帽检测数据集3065张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3065 标注数量(xml文件个数)&#xff1a;3065 标注数量(txt文件个数)&#xff1a;3065 标注…

算法D48 | 动态规划10 | 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

股票问题是一个动态规划的系列问题&#xff0c;今日安排的题目不多&#xff0c;大家可以慢慢消化。 121. 买卖股票的最佳时机 视频讲解&#xff1a;https://www.bilibili.com/video/BV1Xe4y1u77q https://programmercarl.com/0121.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A…

OPTIONS请求(跨域预检查)

目录 一、什么是OPTIONS请求&#xff1f;二、简单请求、复杂请求三、特定的请求头、响应头 一、什么是OPTIONS请求&#xff1f; OPTIONS 请求方式是 HTTP 协议中的一种&#xff0c;主要用于 从响应头中获取服务器支持的HTTP请求方式。 OPTIONS 请求方式是 浏览级行为&#xf…

Redis命名设计

可读性和管理性 以项目名为前缀(防止key冲突)&#xff0c;用冒号分隔&#xff0c;比如项目名:表名:id zh(知乎):news_data(新闻数据):2(主键id) zh:news_data:2 精简性 key的命名&#xff0c;尽量精简&#xff0c;key的名字长度对内存的占用不可忽视&#xff0c;我们来实际…

网络编程--高并发服务器

这里写目录标题 引入场景 多进程并发服务器二级目录二级目录二级目录 多线程并发服务器二级目录二级目录二级目录 多路IO转接服务器设计思路对比引入 select函数简介参数介绍第一个参数第234参数返回值对于第234参数的应用对于最后一个参数总结 附加操作&#xff08;附加四个函…