鸿蒙通用组件弹窗简介

鸿蒙通用组件弹窗简介

  • 弹窗----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()})}
}

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka---总结篇

kafka架构 主要概念 broker: 存储消息的机器 控制器controller (1)使用zookeeper, 除了提供一般的broker功能之外,还负责选举分区首领。通过在zookeepr中创建一个名为 /controller的临时节点称为 controller。每个选出的contro…

DCEP数字人民币:中国法定区块链中数字货币

一、背景 作为全球第二大经济体,中国在数字货币领域的发展一直备受关注。近年来,中国政府积极推动数字货币的研究和试点工作,逐步开放数字货币交易试点,并计划推出中国唯一合法数字货币——数字人民币(RMB Coin&#…

3套Matplotlib主题

分享3套Matplotlib主题,让图表更好看 seaborn默认主题 import seaborn as sns import pandas as pd import matplotlib as mpltips pd.read_csv(./sns_data/tips.csv)sns.relplot(datatips,x"消费金额 ($)",y"小费金额 ($)",hue"客人性…

【Django学习笔记(九)】Flask + MySQL的结合案例

Flask MySQL结合案例 前言正文案例1:添加用户1.1 浏览器发送请求,返回页面main.pyhtml页面 1.2 新增用户并连接数据库main.pyhtml页面 案例2:查询所有用户2.1 main.py2.2 html2.3 bootstrap优化html 前言 在本文中,介绍如何将 F…

MySQL mydumper工具

目录 1. mydumper介绍 2. mydumper参数解释 3. 备份例子 3.1 备份全库(未包含其他) 3.2 备份全库(包含其他) 3.3 备份指定数据库(-B或--database) 3.4 导出指定表(-T或--tables-list) 3.5 只导出表结构,不导出表数据(-d或--no-data) 3.6 只导出表数据&#…

以gitee为例的git入门使用指北

安装git 在linux中我们首先需要使用 sudo apt install git来下载git 在windows中可以下载msysGit 链接:https://git-scm.com/download/win gitee准备 申请账号 建立仓库 ​ 点击新建仓库 这里一般是私有库,点击创建,这时你就拥有一个线上…

[开发|鸿蒙] DevEco Studio编译构建(笔记,持续更新)

构建体系 编译构建是将应用/服务的源代码、资源、第三方库等,通过编译工具转换为可直接在硬件设备上运行的二进制机器码,然后再将二进制机器码封装为HAP/APP软件包,并为HAP/APP包进行签名的过程。其中,HAP是可以直接运行在模拟器…

Kafka应用Demo:按主题订阅消费消息

安装环境 Kafka安装可参考官方网站的指导(https://kafka.apache.org/quickstart), 按步骤解压压缩包,修改配置。然后再启动zookeeper和kafka-server即可。 需要注意的一点:如果是在VMware虚拟机上启动的kafka, 需要修改一下server.properties配置文件&am…

cmake进阶:目录属性之 INCLUDE_DIRECTORIES说明二

一. 简介 前面几篇文章学习了 cmake的一些目录属性,主要有两个重要的目录属性INCLUDE_DIRECTORIES 属性、LINK_DIRECTORIES 属性。文章如下: cmake进阶:目录属性之 INCLUDE_DIRECTORIES-CSDN博客 本文学习 父目录的 INCLUDE_DIRECTORIES …

<网络安全>《79 概念讲解<第十二课 物联网常用协议-(远距离非蜂窝网络)-终端设备>》

协议简称全称名称内容说明ZigBee也称紫蜂低速短距离传输的无线通信协议一种高可靠的无线数传网络,主要特色有低速、低耗电、低成本、支持大量网上节点、支持多种网上拓扑、低复杂度、快速、可靠、安全。ZigBee技术是一种新型技术,主要是依靠无线网络进行…

JAVA IO/NIO 知识点总结

一、常见 IO 模型简介 1. 阻塞IO模型 最传统的一种IO模型,即在读写数据过程中会发生阻塞现象。当用户线程发出IO请求之后,内核会去查看数据是否就绪,如果没有就绪就会等待数据就绪,而用户线程就会处于阻塞状态,用户线…

Linux 命令查看服务器信息

1.查看 CPU 信息 lscpu2.查看内存信息 cat /proc/meminfo |grep MemTotal查看逻辑 CPU个数 cat /proc/cpuinfo | grep "processor"3.查看磁盘信息 df -hl

深入大模型量化技术,大模型端侧落地已Ready?

揭秘未来:大模型量化技术如何革新移动AI应用 ©作者|饮水机 来源|神州问学 前言 最近,苹果发布了OpenELM系列模型,参数规模分别为270M、450M、1.1B和3B。与此同时,微软也推出了Phi-3系列模型,其中mini版本的参数…

数字孪生技术在垃圾焚烧处理中的可视化应用

在迈向智慧城市的进程中,数字孪生技术在垃圾处理领域展现出了巨大潜力。特别是在垃圾焚烧过程的管理和优化上,数字孪生垃圾焚烧可视化技术已成为一项革命性的进步。 通过 HT 构建虚拟的垃圾焚烧模型,实时映射和模拟实际焚烧过程中的各项关键…

Android Studio查看xml文件的修改时间和记录

Android Studio查看xml文件的修改时间和记录 Android Studio里面如果是Java/Kotlin编写界面,可以点击函数开头上面的提交在直接,然后在编辑界面的左侧查看历史时间上的修改记录,但是xml文件里面没有直观的这样操作方式。 但xml里面可以通过快…

专业的保密网文件导入导出系统,让文件流转行为更可控安全

军工单位因其涉及国防安全和军事机密,对保密工作有极高的要求,通常会采取严格的网络隔离措施来保护敏感信息和提高网络安全性。常见的方式是通过物理隔离将网络彻底分隔开来,比如保密网和非保密网。网络隔离后,仍有数据交换的需求…

怎么在家访问公司内网?

在当前的疫情情况下,越来越多的公司开始允许员工在家办公,这就需要解决一个问题:如何在家访问公司的内网资源呢?今天我将介绍一种解决方案——使用【天联】组网,它具有许多优势。 【天联】组网的优势 无网络限制&#…

Pytorch 实现情感分析

情感分析 情感分析是 NLP 一种应用场景,模型判断输入语句是积极的还是消极的,实际应用适用于评论、客服等多场景。情感分析通过 transformer 架构中的 encoder 层再加上情感分类层进行实现。 安装依赖 需要安装 Poytorch NLP 相关依赖 pip install t…

迅为RK3568开发板资料说明4750+页专属文档专为3568编写

iTOP-3568开发板采用瑞芯微RK3568处理器,内部集成了四核64位Cortex-A55处理器。主频高达2.0Ghz,RK809动态调频。集成了双核心架构GPU,ARM G52 2EE、支持OpenGLES1.1/2.0/3.2、OpenCL2.0、Vulkan1.1、内嵌高性能2D加速硬件。 内置独立NPU,算力…

探索希尔排序算法:优雅而高效的增量排序

在计算机科学领域,排序算法是一项至关重要的技术,在各种应用场景中都扮演着重要角色。而希尔排序算法作为一种增量排序方法,在实际应用中展现了其优雅而高效的特性。本文将深入探讨希尔排序算法的原理、实现细节以及优化方法,带您…