当前位置: 首页 > news >正文

鸿蒙通用组件弹窗简介

鸿蒙通用组件弹窗简介

  • 弹窗----Toast
    • 引入@ohos.promptAction模块
    • 通过点击按钮,模拟弹窗
  • 警告对话框----AlertDialog
  • 列表弹窗----ActionSheet
  • 选择器弹窗
  • 自定义弹窗
    • 使用@CustomDialog声明一个自定义弹窗
    • 在需要使用的地方声明
    • 自定义弹窗,完整代码

弹窗----Toast

在这里插入图片描述

引入@ohos.promptAction模块

import promptAction from '@ohos.promptAction'

通过点击按钮,模拟弹窗

Button('点击').width('60%').height(50).onClick(()=>{promptAction.showToast({message:'点击了按钮', // 展示的文字duration:2000, // 停留时长bottom: 100 // 距离底部多远})})

警告对话框----AlertDialog

AlertDialog用于向用户提出告警或者确认的对话框。

在这里插入图片描述

AlertDialog.show({title:'提示信息',message:'此信息比较重要,请确认!!!',autoCancel: true, //点击遮障层时,是否关闭弹窗alignment: DialogAlignment.Bottom, //弹窗位置offset: { dx: 0, dy: -30 }, //相对于弹窗位置的偏移量primaryButton: { //主要按钮value: '确认', //按钮内容fontColor: Color.Red, //字体颜色action: () => { //点击回调console.log('点击了确认按钮')}},secondaryButton: { //次要按钮value: '取消',action: () => {console.log('点击了取消按钮')}},cancel: () => { //点击遮罩层取消时的回调console.info('点击遮罩层取消时的回调')}
})

列表弹窗----ActionSheet

ActionSheet用于给用户一组列表弹窗,等用户选择后再作处理。

在这里插入图片描述

ActionSheet.show({
title:'提示信息',
message: '此信息比较重要,请确认!!!',
autoCancel: true, //点击遮障层时,是否关闭弹窗
alignment: DialogAlignment.Center, //弹窗位置
offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
confirm: { //底部按钮value: '取消', //按钮文本内容action: () => { //按钮回调函数console.log('点击按钮取消')}
},
cancel: () => { //点击遮障层关闭弹窗时的回调console.log('点击遮障层取消')
},
sheets:[{title:'操作1',action: () => {console.log('操作1')}},{title:'操作2',action: () => {console.log('操作2')}},{title:'操作3',action: () => {console.log('操作3')}},
]
})

alignment的几种位置:

DialogAlignment.Top 上部
DialogAlignment.Center 中间
DialogAlignment.Bottom 底部
DialogAlignment.TopStart 左上部
DialogAlignment.TopEnd 右上部
DialogAlignment.CenterStart 中间左边
DialogAlignment.CenterEnd 中间右边
DialogAlignment.BottomStart 左下部
DialogAlignment.BottomEnd 右下部

选择器弹窗

鸿蒙API中有很多选择器弹窗,比如时间、日期、文本等,这里就不做介绍。

自定义弹窗

在实际使用过程中,一定会遇到官方提供的弹窗不能满足需要的情况,这时候就需要尽心自定义。

这里举一个自定义弹窗的简单例子

使用@CustomDialog声明一个自定义弹窗

@CustomDialog
struct CustomDialogText{controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })build(){Column({space: 20}){Text('内容1')Text('内容2')Text('内容3')}.margin(20).onClick(()=>{this.controller.close()})}
}

在build里面定义UI样式,这里只做为展示,随便定义了几个展示的文本内容

在需要使用的地方声明

在使用过程中,需要需要初始化CustomDialogController。

controller: CustomDialogController = new CustomDialogController({builder: CustomDialogText(),// builder就是自定义的弹窗alignment: DialogAlignment.Center, // 弹窗弹出位置offset:{dx: 0, dy: -10} // 弹窗弹出后的偏移量,按需要进行设置
})

定义好controller之后,在使用的时候,直接调用this.controller.open()。

在这里插入图片描述

自定义弹窗,完整代码

@Entry
@Component
struct CommentTest{controller: CustomDialogController = new CustomDialogController({builder: CustomDialogText(),alignment: DialogAlignment.Center,offset:{dx: 0, dy: -10}})build(){Column({space: 20}){Button('点击弹出自定义弹窗').width('60%').height(50).onClick(()=>{this.controller.open()})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}@CustomDialog
struct CustomDialogText{controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })build(){Column({space: 20}){Text('内容1')Text('内容2')Text('内容3')}.margin(20).onClick(()=>{this.controller.close()})}
}

相关文章:

鸿蒙通用组件弹窗简介

鸿蒙通用组件弹窗简介 弹窗----Toast引入ohos.promptAction模块通过点击按钮,模拟弹窗 警告对话框----AlertDialog列表弹窗----ActionSheet选择器弹窗自定义弹窗使用CustomDialog声明一个自定义弹窗在需要使用的地方声明自定义弹窗,完整代码 弹窗----Toa…...

[译文] 恶意代码分析:1.您记事本中的内容是什么?受感染的文本编辑器notepad++

这是作者新开的一个专栏,主要翻译国外知名安全厂商的技术报告和安全技术,了解它们的前沿技术,学习它们威胁溯源和恶意代码分析的方法,希望对您有所帮助。当然,由于作者英语有限,会借助LLM进行校验和润色&am…...

Spring Boot3.x集成Disruptor4.0

Disruptor介绍 Disruptor是一个高性能内存队列,研发的初衷是解决内存队列的延迟问题(在性能测试中发现竟然与I/O操作处于同样的数量级)。基于Disruptor开发的系统单线程能支撑每秒600万订单,2010年在QCon演讲后,获得了业界关注。2011年&…...

GoEdge自建CDN工具

GoEdge是一款管理分布式CDN边缘节点的开源工具软件,可以让用户轻松地、低成本地创建CDN/WAF等应用。同时提供免费版本和商业版本,本文基本免费版本安装测试。 GoEdgep安装涉及三部分: 边缘节点 - 接收和响应用户请求的终端节点 管理员系统 - …...

牛客储物点的距离

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 一个数轴,每一个储物点会有一些东西,同时它们之间存在距离。 每次给个区间[l,r],查询把这个区间内所有储物点的东西运到另外一个储物点的代价是多少&#xff1…...

【C++历练之路】红黑树——map与set的封装实现

W...Y的个人主页💕 gitee代码仓库分享😊 前言:上篇博客中,我们为了使二叉搜索树不会出现”一边倒“的情况,使用了AVL树对搜索树进行了处理,从而解决了数据在有序或者接近有序时出现的情况。但是AVL树还会…...

RDB快照是怎么实现的?

RDB快照是怎么实现的? 前言快照怎么用?执行快照时,数据能被修改吗?RDB 和 AOF 合体 前言 虽说 Redis 是内存数据库,但是它为数据的持久化提供了两个技术。 分别是「 AOF 日志和 RDB 快照」。 这两种技术都会用各用一…...

智能体可靠性的革命性提升,揭秘知识工程领域的参考架构新篇章

引言:知识工程的演变与重要性 知识工程(Knowledge Engineering,KE)是一个涉及激发、捕获、概念化和形式化知识以用于信息系统的过程。自计算机科学和人工智能(AI)历史以来,知识工程的工作流程因…...

Shell 初始化配置指北 | Ubuntu

唠唠闲话 概要:在不同的Shell环境(如Bash和Zsh)中设置环境变量、设置初始脚本,以及如何根据不同的使用场景(用户级或系统级)管理和设置初始运行命令。 p.s. 如果你很熟悉 Linux,推荐跳到最后一…...

[嵌入式系统-69]:RT-Thread-组件:网络组件“组”,RT-Thread系统通向外部网络世界的入口

目录 RT-Thread 提供的网络世界入口 - 网络组件 1. 总概 2. AT 3. Lwip: 轻量级IP协议栈 4. W5500 5. Netdev 6. RT-Thread SAL(Socket Abstraction Layer)套接字和BSD套接字区别 RT-Thread SAL 套接字接口示例 BSD 套接字接口示例 …...

Linux学习笔记1---Windows上运行Linux

在正点原子的教程中学习linux需要安装虚拟机或者在电脑上安装一个Ubuntu系统,但个人觉得太麻烦了,现在linux之父加入了微软,因此在Windows上也可以运行linux 了。具体方法如下: 一、 在Windows上的设置 在window的搜索框内&#…...

Java算法-力扣leetcode-135. 分发糖果

135. 分发糖果 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求,给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果,计算并…...

企业为什么需要主数据管理工具?十大热门主数据管理工具盘点

主数据管理是一套综合性的策略和技术,用于协调和管理企业内用于识别关键业务实体(如客户、产品、供应商和员工)的一致性、准确性和统一性的数据。主数据管理的目的是创建一个“单一真相源”,确保在不同部门和系统之间共享的数据保…...

免费思维13招之一:体验型思维

思维01:体验型思维 第一大战略:体验型思维。 体验型思维是免费思维中最简单的思维,我们先从最简单的讲起,由简入繁,简单的我们少讲,复杂的我们多讲。 那么,什么是体验型思维呢? 很简单,就是先让客户进行体验,再进行成交的方式。这一种思维,具体的可以分为两种:…...

面试C++(基础篇)-NULL与nullptr的区别?

3: NULL与nullptr的区别&#xff1f; 在C中&#xff0c;NULL和nullptr都用于表示空指针&#xff0c;但它们之间存在一些关键的区别&#xff1a; 1. 来源和含义&#xff1a; • NULL&#xff1a;在C中&#xff0c;NULL最初是从C语言中继承过来的&#xff0c;定义在<cstddef…...

「AIGC」深度学习

深度学习是机器学习的一个子领域&#xff0c;它基于人工神经网络的学习算法。深度学习在图像和语音识别、自然语言处理、医学图像分析、药物发现、自动驾驶汽车等领域取得了显著的进展。以下是围绕深度学习的几个关键主题的阐述。 学习路线 基础数学&#xff1a; 了解线性代数…...

mysql5.7数据库安装及性能测试

mysql5.7数据库安装及性能测试 记录Centos7.9下安装mysql 5.7并利用benchmark工具简单测试mysql的性能。 测试机&#xff1a;centos7.9 配置&#xff1a;4C8G40G 1. 下安装mysql5.7 安装mysql5.7&#xff1a; # 通过官方镜像源安装$ wget http://dev.mysql.com/get/mysql57-com…...

聪明与诚实:社会信任的桥梁

在现代社会中&#xff0c;我们经常听到这样的评价&#xff1a;“某人真聪明。”然而&#xff0c;当我们深入思考时&#xff0c;会发现“聪明”这个词背后所承载的含义并不单一。聪明和狡诈往往被混淆&#xff0c;而诚实的价值却时常被忽视。在一个高度诚信的社会里&#xff0c;…...

基于单片机的无线数据传输系统设计

摘要:基于单片机的无线数据传输系统的设计,实现了温度和湿度的自动采集、无线通讯和报警功能。该系统包括了LCD1602显示电路、DHT11温湿度采集电路等,完成了基于无线数据传输的方法来实现温湿度的采集。 关键词:温湿度检测;N RF 24 L 01;单片机 0 引言 随着科技水平的提高,…...

【IP:Internet Protocol,子网(Subnets),IPv6:动机,层次编址:路由聚集(rout aggregation)】

文章目录 IP&#xff1a;Internet Protocol互联网的的网络层IP分片和重组&#xff08;Fragmentation & Reassembly&#xff09;IP编址&#xff1a;引论子网&#xff08;Subnets&#xff09;特殊IP地址IP 编址: CIDR子网掩码&#xff08;Subnet mask&#xff09;转发表和转发…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...