鸿蒙通用组件弹窗简介

ops/2024/9/24 4:23:31/

鸿蒙通用组件弹窗简介

  • 弹窗----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://www.ppmy.cn/ops/39519.html

相关文章

C语言----斐波那契数列

各位看官们好,当我写了上一篇博客杨辉三角后,有一些看官叫我讲一下斐波那契数列。对于这个大家应该是有了解的。最简单的规律就是f(n)f(n-2)f(n-1)。就是当前是前两项之和,然后下标1和0都是1.从第三项开始计算的。那么我们知道规律&#xff0…

Linux系统编程——进程控制

目录 一,进程创建 1.1 fork回顾 1.2 写时拷贝 1.3 fork用处 1.4 fork调用失败原因 二,进程退出 2.1 进程退出场景 2.2 mainCRTStartup调用 2.3 进程退出码 2.3.1 main函数返回值 2.3.2 strerror ​编辑 2.3.3 命令的退出码 2.4 进程正常退…

心理应用工具包 psychtoolbox 绘制小球走迷宫

psychtoolbox 是 MATLAB 中的一个工具包,对于科研人员设计实验范式来说是不二之选,因为它可以操作计算机的底层硬件,精度可以达到帧的级别。 文章目录 一、实验目的二、psychtoolbox 的下载安装三、Psychtoolbox 的基本使用四、完整代码 一、…

UE4_Water插件_Buoyancy组件使用

water插件提供了一个浮力Actor蓝图类。 需要注意的几个问题: 1、StaticMesh需要替换根组件。 2、需要模拟物理设置质量。 3、需要添加浮力组件,设置浮力点,应用水中牵引力。 4、最重要的是需要激活——自动启用。 5、调水波长的地方 双击图片…

通过自建镜像方式搭建RabbitMQ集群

通过自建镜像方式搭建RabbitMQ集群 1. 应用准备1.1 应用目录结构1.2 配置文件1.2.1 .erlang.cookie1.2.2 hosts1.2.3 rabbitmq.conf1.2.4 rabbitmq-env.conf 2. 编写DockerFile2.1 将所有本地文件拷贝到工作目录2.2 拷贝文件到源目录&增加执行权限2.3 安装Erlang & rab…

Java17的崛起——newrelic的2024 年 Java 生态系统状

newrelic 2024 年 Java 生态系统状况 原文PDF:点我下载 生产中最常用的 Java 版本 Oracle 每六个月发布一次新的 Java 版本(通常是在 3 月和 9 月),每个版本都包含一些新功能和错误修复。每两年,Oracle 都会推出一…

gitee 简易使用 上传文件

Wiki - Gitee.com 官方教程 1.gitee 注册帐号 (直接选择初始化选项即可,无需下载git) 2.下载git 安装 http://git-scm.com/downloads 3. 桌面 鼠标右键 或是开始菜单 open git bash here 输入(复制 ,粘贴) 运行…

最大子序列的分数

题目链接 最大子序列的分数 题目描述 注意点 n nums1.length nums2.length从nums1和nums2中选一个长度为k的子序列对应的下标对nums1中下标对应元素求和&#xff0c;乘以nums2中下标对应元素的最小值得到子序列的分数0 < nums1[i], nums2[j] < 1000001 < k < …