鸿蒙HarmonyOS- 弹框组件库

简介

        今天介绍一个基于ArkUI框架开发的弹框组件库,该库基于ArkUI的弹框基础功能和自定义能力。针对通用的弹框业务场景,该库提供了丰富的组件弹窗功能。

        包括确认输入弹窗、列表展示选择弹窗、自定义底部/顶部弹窗、自定义动画弹窗、自定义全屏弹窗、消息类弹窗、抽屉类弹窗、联想类弹窗、图片浏览弹窗等。通过使用这个组件库,可以让弹窗的集成和使用变得更加简单。

示例

1.支持内容确认弹窗

2.支持input弹窗

3.支持列表list弹窗

4.支持bottom列表互弹窗

5.支持bottom复杂交互弹窗

6.支持气泡类弹窗

7.支持自定义全屏弹窗

8.支持消息类弹窗

9.支持顶部弹窗

10.支持联想类弹窗

11.支持抽屉类弹窗

12.支持自定义动画弹窗

13.支持大图浏览弹窗

使用方法

1.安装

ohpm install @ohos/dialog

2.在需要使用的页面导入需要的组件,如ConfirmDialog.ets:

import { ConfirmDialog } from '@ohos/dialog'

以确认弹框为例,可以这样使用dialog弹框库:

// 引入需要的模块和组件
import { ConfirmDialog } from '@ohos/dialogs'
import { BaseCenterMode } from '@ohos/dialogs'  // 自定义属性
import { TestType } from '@ohos/hypium'// 定义 ConfirmExample 结构体,作为入口组件
@Entry
@Component
struct ConfirmExample {// 定义状态变量@State textValue: string = '我是标题'@State contentValue: string = '床前明月光,疑是地上霜,举头望明月,低头思故乡。床前明月光,疑是地上霜,举头望明月,低头思故乡。'@State inputValue: string = 'click me'@State positionDialog: string = 'center'@State animitionMove: string = 'center'@State model: BaseCenterMode = new BaseCenterMode()// 生命周期钩子,组件即将出现时调用aboutToAppear() {this.model.title = '我是标题',this.model.contentValue = '床前明月光,疑是地上霜,举头望明月,低头思故乡。床前明月光,疑是地上霜,举头望明月,低头思故乡。'// this.model.contentMargin = 20this.model.titleMargin = { top: 30, bottom: 10 }this.model.btnWidth = '100%'this.model.btnHeight = '100%'this.model.confirmBtnFontColor = '#87C5BF'this.model.confirmBtnBgColor = '#fff'this.model.confirm = this.onAcceptthis.model.btnContentHeight = 60this.model.btnContentMargin = { top: 20 }this.model.btnContentBorder = {width: { top: 1 },color: { top: '#F0F0F0' },style: { top: BorderStyle.Solid },}}// 创建自定义对话框控制器dialogController: CustomDialogController = new CustomDialogController({builder: ConfirmDialog({slotContent: () => {this.componentBuilder()},model: this.model}),cancel: this.existApp,autoCancel: true,alignment: DialogAlignment.Center,offset: { dx: 0, dy: 0 },gridCount: 4,customStyle: true})// 在自定义组件即将销毁时删除和置空对话框控制器aboutToDisappear() {delete this.dialogController, // 删除dialogControllerthis.dialogController = undefined // 将dialogController置空}// 确认按钮点击回调函数onAccept() {console.info('Callback when the second button is clicked')}// 取消按钮点击回调函数existApp() {console.info('Click the callback in the blank area')}// 自定义内容构建函数@Builder componentBuilder() {Text('床前明月光,疑是地上霜,举头望明月,低头思故乡。床前明月光,疑是地上霜,举头望明月,低头思故乡。').fontSize(this.model.contentFontSize).margin(20).textAlign(this.model.contentTextAlign)}// 构建入口组件build() {Column() {Button('显示confirm弹窗').onClick(() => {this.dialogController.open()})}}
}

示例中的其他弹框使用方法以及框架的内部实现原理可以参考:OpenHarmony-TPC/openharmony_tpc_samples - Gitee.com

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

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

相关文章

Ribbon相关面试及答案(2024)

1、Ribbon是什么,它在微服务架构中扮演什么角色? Ribbon是一个客户端负载均衡器,它在微服务架构中扮演着关键性的角色。Ribbon的设计理念是在客户端进行服务发现和负载均衡,这种方式不同于传统的通过中心化的负载均衡器&#xff…

Jenkins基础教程

目录 第一章、快速了解Jenkins1.1)Jenkins中一些概念介绍1.2)Jenkins和maven用途上的区别1.3)为什么使用Jenkins1.4)学习过程中的疑问 第二章、安装Jenkins2.1)安装之前的准备2.2)Windows中Jenkins下载安装…

java servlet软件缺陷库管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java servlet软件缺陷库管理系统是一套完善的java web信息管理系统 系统采用serlvetdaobean(mvc模式),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOM…

什么是安全信息和事件管理(SIEM),有什么用处

安全信息和事件管理(SIEM)对于企业主动识别、管理和消除安全威胁至关重要。SIEM 解决方案采用事件关联、AI 驱动的异常检测以及机器学习驱动的用户和实体行为分析 (UEBA) 等机制来检测、审查和应对网络安全威胁。这些功能使 SIEM …

14:00面试,14:06就出来了,问的问题有点变态

从小厂出来,没想到在另一家公司又寄了。 到这家公司开始上班,加班是每天必不可少的,看在钱给的比较多的份上,就不太计较了。没想到8月一纸通知,所有人不准加班,加班费不仅没有了,薪资还要降40%,…

mpi 与 nccl 多进程多卡单机示例结果验证

做了部分注释&#xff0c;比较乱 本示例结构&#xff1a; 1&#xff0c;源代码 #include <stdio.h> #include "cuda_runtime.h" #include "nccl.h" #include "mpi.h" #include <unistd.h> #include <stdint.h> #include <…

如何正确使用docker搭建靶场--pikachu

在Linux中搭建靶场——pikachu 1.开启docker systemctl start docker 2.查看docker状态 systemctl status docker 3.查看docker存在那些镜像 docker images 4.拉取镜像&#xff0c;这里是以pikachu为例因此需要一个php5的版本 &#xff08;1&#xff09;打开代理&#xff…

照片怎么抠图换背景?不会的伙伴看这里!

随着数字技术的日新月异&#xff0c;抠图换背景技术已成为图像处理的翘楚。它是指将图片中的主体与背景分离&#xff0c;再将其置于新的背景之上。这一技艺在广告、摄影和设计等领域中占据着举足轻重的地位。本文将为您揭示三种抠图换背景的秘籍&#xff0c;助您轻松掌握这一技…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切(ROI)功能(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切&#xff08;ROI&#xff09;功能&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的图像剪切&#xff08;ROI&#xff09;功能的技术背景CameraExplorer如何使用图像剪切&#xff08;ROI&#xff09;…

electron预加载脚本

webPreferences 指定预加载脚本,可以使用部分node脚本 webPreferences: {preload: path.join(__dirname, "preload.js"),},创建preload.js 中 测试文件读取功能 const fs require(fs) const text fs.readFileSync(package.json, utf-8)console.log(text)报错,为了…

基于果蝇算法优化的Elman神经网络数据预测 - 附代码

基于果蝇算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于果蝇算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于果蝇优化的Elman网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针…

Windows搭建RTSP视频流服务(EasyDarWin服务器版)

文章目录 引言1、安装FFmpeg2、安装EasyDarWin3、实现本地\虚拟摄像头推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP &#xff08;Real-Time Streaming Protocol&#xff09;实时流媒体协议。 RTSP定义流格式&am…

Apache Commons VFS(虚拟文件系统)使用详解

第1章&#xff1a;Apache Commons VFS简介 大家好&#xff0c;我是小黑&#xff0c;今天我们来聊聊Apache Commons VFS&#xff08;虚拟文件系统&#xff09;。想必很多朋友都听说过或者用过Apache Commons的其他库&#xff0c;但是VFS可能还有点陌生。那么&#xff0c;什么是…

Tomcat Notes: Deployment File

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、Tomcat deployment1.1、Two modes of …

test ui-02-UI 测试组件之 Appium 入门介绍

Appium简介 正如主页所述&#xff0c;Appium的目标是支持许多不同平台&#xff08;移动、Web、桌面等&#xff09;的UI自动化。 不仅如此&#xff0c;它还旨在支持用不同语言&#xff08;JS、Java、Python等&#xff09;编写的自动化代码。 将所有这些功能组合到一个程序中是…

贝叶斯推断:细谈贝叶斯变分和贝叶斯网络

1. 贝叶斯推断 统计推断这件事大家并不陌生&#xff0c;如果有一些采样数据&#xff0c;我们就可以去建立模型&#xff0c;建立模型之后&#xff0c;我们通过对这个模型的分析会得到一些结论&#xff0c;不管我们得到的结论是什么样的结论&#xff0c;我们都可以称之为是某种推…

数据结构【线性表篇】(一)

数据结构【线性表篇】(一&#xff09; 文章目录 数据结构【线性表篇】(一&#xff09;前言为什么突然想学算法了&#xff1f;为什么选择码蹄集作为刷题软件&#xff1f; 目录一、顺序表(一)、顺序表的定义(二)、顺序表的插入删除(三)、顺序表的查找 二、完整代码(一)、顺序表的…

骑砍战团MOD开发(29)-module_scenes.py游戏场景

骑砍1战团mod开发-场景制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Cw411N7G4/ 一.骑砍游戏场景 骑砍战团中进入城堡,乡村,战斗地图都被定义为场景,由module_scenes.py进行管理。 scene(游戏场景) 天空盒(Skyboxes.py) 地形(terrain code) 场景物(scene_…

《3D数学基础-图形和游戏开发》阅读笔记 | 3D数学基础 (学习中)

文章目录 3D数学基础矢量/向量概述 - 什么是向量单位矢量&#xff1a;只关注方向不关注大小 数学运算矢量的加法与减法减法的几何意义计算一个点到另一个点的位移矢量的点积与叉积 矩阵矩阵的几何意义 3D数学基础 矢量/向量 在笔记中 变量使用小写字母表示&#xff0c;a由于…

Springboot集成RabbitMq二

接上一篇&#xff1a;Springboot集成RabbitMq一-CSDN博客 1、搭建项目-消费者 与之前一样 2、创建配置类 package com.wym.rabbitmqconsumer.utils;import org.springframework.amqp.core.Binding; import org.springframework.amqp.core.BindingBuilder; import org.spring…