【鸿蒙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，一经查实，立即删除！

相关文章

CSS 浮动

CSS 浮动

浮动 在标准流当中，元素或者标签在页面上摆放的时候会出现不如意的地方。要想解决这些问题可以采用脱离标准流的方式来进行解决这些问题，脱离标准流也称为脱离文档流。 脱离标准流的解决方式有三种，一种是浮动，另外一种是固定定位…
阅读更多...
如何读懂磁滞回曲线（磁化曲线、退磁曲线、内禀曲线）

如何读懂磁滞回曲线（磁化曲线、退磁曲线、内禀曲线）

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

算法——贪心

「贪心的本质是选择每一阶段的局部最优，从而达到全局最优」 贪心无套路 1. 分发饼干 贪心策略： （1）局部最优就是大饼干喂给胃口大的，充分利用饼干尺寸喂饱一个，全局最优就是喂饱尽可能多的小孩 &#xff08…
阅读更多...
Linux chapter1 常用命令 cp

Linux chapter1 常用命令 cp

note 1 : netstat、curl、ip、nmap、dig 这些都是常用的网络诊断工具，它们的全称如下： netstat：Network Statistics，网络统计，用于显示网络连接，路由表，网络接口统计等网络信息。curl&#xf…
阅读更多...
Kali Linux 更换优质国内源

Kali Linux 更换优质国内源

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

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 和 序列化

RPC 1 RPC调用流程 1.1 clerk客户端调用远程服务 Clerk::PutAppend() raftServerRpcUtil::PutAppend() raftServerRpcUtil是client与kvserver通信的入口， 包含kvserver功能的一对一映射：Get/PutAppend，通过stub对象——raftKVRpcProctoc:…
阅读更多...
web前端之实现复选功能、repeat

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++]

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

Induction or tail-recursion

选择排序 遍历整个待排序的数组，从第一个元素开始。在未排序的部分中，找到最小（或最大）的元素，并将其与第一个元素交换位置。接着从第二个元素开始，重复步骤2，直到所有元素都被排序 迭代版 递…
阅读更多...
Qt实现简单的五子棋程序

Qt实现简单的五子棋程序

Qt五子棋小程序 Qt五子棋演示及源码链接登陆界面单机模式联机模式联网模式参考 Qt五子棋 参考大佬中国象棋程序，使用Qt实现了一个简单的五子棋小程序，包含了单机、联机以及联网三种模式；单机模式下实现了简易的AI；联机模式为PtoP…
阅读更多...
OPTIONS请求（跨域预检查）

OPTIONS请求（跨域预检查）

目录 一、什么是OPTIONS请求？二、简单请求、复杂请求三、特定的请求头、响应头 一、什么是OPTIONS请求？ OPTIONS 请求方式是 HTTP 协议中的一种，主要用于 从响应头中获取服务器支持的HTTP请求方式。 OPTIONS 请求方式是 浏览级行为&#xf…
阅读更多...
Redis命名设计

Redis命名设计

可读性和管理性 以项目名为前缀(防止key冲突)，用冒号分隔，比如项目名:表名:id zh(知乎):news_data(新闻数据):2(主键id) zh:news_data:2 精简性 key的命名，尽量精简，key的名字长度对内存的占用不可忽视，我们来实际…
阅读更多...
网络编程--高并发服务器

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

这里写目录标题 引入场景 多进程并发服务器二级目录二级目录二级目录 多线程并发服务器二级目录二级目录二级目录 多路IO转接服务器设计思路对比引入 select函数简介参数介绍第一个参数第234参数返回值对于第234参数的应用对于最后一个参数总结 附加操作（附加四个函…
阅读更多...
【SRE系列之docker容器】--dockerfile镜像优化

【SRE系列之docker容器】--dockerfile镜像优化

dockerfile镜像优化 1.1 镜像优化方法 系统镜像采用ubuntu或者alpine，会比centos少1G左右编写业务镜像时从官网拉取镜像，其余配置根据业务需求再配置编写dockerfile时把不用的安装包卸载或者删除尽量减少run命令的使用（一个run命令&#xf…
阅读更多...
牛客题霸-SQL入门篇（刷题记录二）

牛客题霸-SQL入门篇（刷题记录二）

本文基于前段时间学习总结的 MySQL 相关的查询语法，在牛客网找了相应的 MySQL 题目进行练习，以便加强对于 MySQL 查询语法的理解和应用。 以下内容是牛客题霸-SQL入门篇剩余的第 21-39 道题目的 SQL 代码答案。 由于涉及到的数据库表较多，因…
阅读更多...
【蓝桥杯选拔赛真题39】C++字符去重 第十四届蓝桥杯青少年创意编程大赛 算法思维 C++编程选拔赛真题解析

【蓝桥杯选拔赛真题39】C++字符去重 第十四届蓝桥杯青少年创意编程大赛 算法思维 C++编程选拔赛真题解析

目录 C/C++字符去重 一、题目要求 1、编程实现 2、输入输出
阅读更多...
链路聚合实验（华为）

链路聚合实验（华为）

思科设备参考：链路聚合实验（思科） 一，技术简介 网络设备的链路聚合技术（Link Aggregation）是一种将多个物理链路捆绑在一起，形成一个逻辑链路的技术。这样做可以增加带宽、提高可靠性和实现负…
阅读更多...
（五）OpenOFDM解码

（五）OpenOFDM解码

解码 现在我们已经校正了残余 CFO，也校正了通道增益，下一步是将 FFT 输出映射到实际数据位。这是对数据包进行编码的逆过程。 解调：复数到位解交织：对每个 OFDM 符号内的比特进行混洗卷积解码：去除冗余并纠正潜在的位…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023