鸿蒙 ArkUI - ArkTS 组件 官方 UI组件 合集

ArkUI 组件速查表

鸿蒙应用开发页面上需要实现的 UI 功能组件如果在这 100 多个组件里都找不到,那就需要组合造轮子了

使用技巧:先判断需要实现的组件大方向,比如“选择”、“文本”、“信息”等,或者是某种形状比如“块”、“图”,再去表格里面看看具体作用。标题已装导航,机长,准备起飞。

行列与堆叠

组件名称作用
Flex弹性布局子组件的容器
Column垂直方向布局的容器
Row水平方向布局容器
Stack层叠布局容器
RelativeContainer相对布局容器
FolderStack继承于 Stack(层叠布局)控件,新增了折叠屏悬停能力

栅格与分栏

组件名称作用
GridRow栅格布局容器,仅可以和栅格子组件(GridCol)在栅格布局场景中使用
GridCol栅格子组件,必须作为栅格容器组件(GridRow)的子组件使用
ColumnSplit将子组件纵向布局,并在每个子组件之间插入一根横向的分割线
RowSplit将子组件横向布局,并在每个子组件之间插入一根纵向的分割线
SplitLayout上下结构布局,主要分为上下文本和上下图文两种类型
FoldSplitContainer折叠屏二分栏、三分栏在展开态、悬停态以及折叠态的区域控制
SideBarContainer提供侧边栏可以显示和隐藏的侧边栏容器

滚动与滑动

组件名称作用
List列表布局容器
ListItem用来展示列表具体 item,必须配合 List 来使用
ListItemGroup用来展示列表 item 分组,必须配合 List 组件来使用
Grid网格布局容器,由“行”和“列”分割的单元格所组成
GridItem网格布局容器中单项内容容器
Scroll可滚动的容器,当子组件的布局尺寸超过父组件的时,可以滚动
Swiper滑块视图容器,提供子组件滑动轮播显示的能力
WaterFlow瀑布流容器,由“行”和“列”分割的单元格所组成
FlowItem瀑布流组件的子组件,用来展示瀑布流具体 item
ScrollBar滚动条组件,配合可滚动组件使用,如 List、Grid、Scroll、WaterFlow
Refresh可以进行页面下拉操作并显示刷新动效的容器组件
ComposeListItem列表包含一系列相同宽度的列表项
GridObjectSortComponent网格对象的编辑排序,用于网格对象的编辑、拖动排序、新增和删除
SwipeRefresher内容加载指获取内容并加载出来,常用于衔接展示下拉加载的内容

导航与切换

组件名称作用
Indicator导航点组件,提供圆点导航点以及数字导航点两种导航点样式
Navigation路由导航的根视图容器,一般作为 Page 页面的根容器使用
NavDestination作为子页面的根容器,用于显示 Navigation 的内容区
MultiNavigation用于在大尺寸设备上分栏显示、进行路由跳转
Stepper步骤导航器组件,适用于引导用户按照步骤完成任务的导航场景
StepperItem用作 Stepper 组件的页面子组件
Tabs通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图
TabContent仅在 Tabs 中使用,对应一个切换页签的内容视图

按钮与选择

组件名称作用
Button按钮组件,可快速创建不同样式的按钮
Toggle组件提供勾选框样式、状态按钮样式和开关样式
Checkbox提供多选框组件,通常用于某选项的打开或关闭
CheckboxGroup多选框群组,用于控制多选框全选或者不全选状态
CalendarPicker日历选择器组件,提供下拉日历弹窗,可以让用户选择日期
DatePicker日期选择器组件,用于根据指定日期范围创建日期滑动选择器
TextPicker滑动选择文本内容的组件
TimePicker时间选择组件,根据指定参数创建选择器,支持选择小时及分钟
Radio单选框,提供相应的用户交互选择项
Rating提供在给定范围内选择评分的组件(五星评分)
Select提供下拉选择菜单,可以让用户在多个选项之间选择
Slider滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景
DownloadFileButton下载文件按钮,获取到当前应用在 Download 公共目录中所属的存储路径
ProgressButton文本下载按钮,可显示具体下载进度
SegmentButton分段按钮组件,包含页签类分段按钮、单选类分段按钮、多选类分段按钮
Filter多条件筛选,结合具体场景选择合适筛选方式

文本与输入

组件名称作用
Text显示一段文本的组件
TextArea多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示
TextInput单行文本输入框组件
RichEditor支持图文混排和文本交互式编辑的组件
Search搜索框组件,适用于浏览器的搜索内容输入框等应用场景
Span作为 Text、ContainerSpan 组件的子组件,用于显示行内文本的组件
ImageSpanText、ContainerSpan 组件的子组件,用于显示行内图片
ContainerSpanText 组件的子组件,用于统一管理多个 Span、ImageSpan 的背景色及圆角弧度
SymbolSpan作为 Text 组件的子组件,用于显示图标小符号的组件
SymbolGlyph显示图标小符号的组件
Hyperlink超链接组件,组件宽高范围内点击实现跳转
RichText富文本组件,解析并显示 HTML 格式文本
SelectionMenu文本选择菜单,适用于 RichEditor 组件或 Text 组件

图片与视频

组件名称作用
Image图片组件,常用于在应用中显示图片
ImageAnimator提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表
Video用于播放视频文件并控制其播放状态的组件

信息展示

组件名称作用
AlphabetIndexer可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件
Badge信息标记组件,可以附加在单个组件上用于信息提醒的容器组件
Chip操作块,用于搜索框历史记录或者邮件发送列表等场景
ChipGroupChipGroup 高级组件,提供操作块群组,用于对文件或者资源内容进行分类等场景
Counter计数器组件,提供相应的增加或者减少的计数操作
advanced.CounterCounter 是用于精确调节数值的组件
DataPanel数据面板组件,用于将多个数据占比情况使用占比图进行展示
ExceptionPrompt异常提示,适用于有异常需要提示异常内容的情况
Gauge数据量规图表组件,用于将数据展示为环形图表
LoadingProgress用于显示加载动效的组件
Marquee跑马灯组件,用于滚动展示一段单行文本
PatternLock图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景
Progress进度条组件,用于显示内容加载或操作处理等进度
Popup显示特定样式气泡
QRCode用于显示单个二维码的组件
TextClock通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。
TextTimer通过文本显示计时信息并控制其计时器状态的组件
TreeView树视图作为一种分层显示的列表,适合显示嵌套结构

空白与分隔

组件名称作用
Blank空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力
Divider提供分隔器组件,分隔不同内容块/内容元素

画布绘制

组件名称作用
Canvas提供画布组件,用于自定义绘制图形
CanvasGradient渐变对象
CanvasPattern指定图像和重复方式创建图片填充的模板
CanvasRenderingContext2D使用 RenderingContext 在 Canvas 组件上进行绘制,可以是矩形、文本、图片等
DrawingRenderingContext在 Canvas 组件上进行绘制,绘制对象可以是矩形、文本、图片等
ImageBitmap存储 canvas 渲染的像素数据,用于高效加载静态或动态图像资源
ImageData存储 canvas 渲染的像素数据,存储原始像素数据
Matrix2D矩阵对象,可以对矩阵进行缩放、旋转、平移等变换
OffscreenCanvas用于自定义绘制图形
OffscreenCanvasRenderingContext2D在 Canvas 上进行离屏绘制,绘制对象可以是矩形、文本、图片等
Path2D路径对象,支持通过对象的接口进行路径的描述,并通过 Canvas 的 stroke 接口或者 fill 接口进行绘制

图形绘制

组件名称作用
Circle用于绘制圆形的组件
Ellipse椭圆绘制组件
Line直线绘制组件
Polyline折线绘制组件
Polygon多边形绘制组件
Path路径绘制组件,根据绘制路径生成封闭的自定义形状
Rect矩形绘制组件
Shape绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性

渲染绘制

组件名称作用
XComponent提供用于图形绘制和媒体数据写入的 Surface,XComponent 负责将其嵌入到视图中
Component3D3D 渲染组件,可以加载 3D 模型资源并做自定义渲染,通常用于 3D 动效场景
EmbeddedComponent用于支持在当前页面嵌入本应用内其他 EmbeddedUIExtensionAbility 提供的 UI

标题栏与工具栏

组件名称作用
ComposeTitleBar一种普通标题栏,支持设置标题、头像和副标题,可用于一级页面、二级及其以上界面配置返回键
EditableTitleBar编辑型标题栏,适用于多选界面或者内容的编辑界面,一般采取左叉右勾的形式
SelectTitleBar下拉菜单标题栏包含一个下拉菜单,可用于页面之间的切换;可用于一级页面、二级及其以上界面
TabTitleBar页签型标题栏,用于页面之间的切换。仅一级页面适用
ToolBar具栏用于展示针对当前界面内容的操作选项,在界面底部显示
SubHeader子标题,用于列表项顶部,将该组列表划分为一个区块,子标题名称用来概括该区块内容

菜单

组件名称作用
Menu以垂直列表形式显示的菜单
MenuItem用来展示菜单 Menu 中具体的 item 菜单项
MenuItemGroup该组件用来展示菜单 MenuItem 的分组
ContextMenu在页面范围内关闭通过 bindContextMenu 属性绑定的菜单

动画

组件名称作用
属性动画 (animation)组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验
显式动画 (animateTo)提供全局 animateTo 显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效
关键帧动画 (keyframeAnimateTo)在 UIContext 中提供 keyframeAnimateTo 接口来指定若干个关键帧状态,实现分段的动画
页面间转场 (pageTransition)当路由进行切换时,通过在 pageTransition 函数中自定义页面入场和页面退场的转场动效
组件内转场 (transition)通过 transition 属性配置转场参数,在组件插入和删除时显示过渡动效
共享元素转场 (sharedTransition)可以通过设置组件的该属性将该元素标记为共享元素并设置对应的共享元素转场动效
组件内隐式共享元素转场 (geometryTransition)在视图切换过程中提供丝滑的上下文传承过渡
路径动画 (motionPath)设置组件进行位移动画时的运动路径
粒子动画 (Particle)在一定范围内随机生成的大量粒子产生运动而组成的动画
显式动画立即下发 (animateToImmediately)用来提供显式动画立即下发功能。同时加载多个属性动画的情况下,使用该接口可以立即执行闭包代码中状态变化导致的过渡动效

弹窗

组件名称作用
警告弹窗 (AlertDialog)显示警告弹窗组件,可设置文本内容与响应回调
列表选择弹窗 (ActionSheet)列表弹窗
自定义弹窗 (CustomDialog)显示自定义弹窗。使用弹窗组件时,可优先考虑自定义弹窗,便于自定义弹窗的样式与内容
日历选择器弹窗 (CalendarPickerDialog)点击日期弹出日历选择器弹窗,可选择弹窗内任意日期
日期滑动选择器弹窗 (DatePickerDialog)根据指定的日期范围创建日期滑动选择器,展示在弹窗上
时间滑动选择器弹窗 (TimePickerDialog)以 24 小时的时间区间创建时间滑动选择器,展示在弹窗上
文本滑动选择器弹窗 (TextPickerDialog)根据指定的选择范围创建文本选择器,展示在弹窗上
弹出框 (Dialog)一种模态窗口,用于在保持当前的上下文环境时,临时展示用户需关注的信息或待处理的操作,用户在模态弹出框内完成上述交互任务

卡片

组件名称作用
FormLink提供静态卡片交互组件,用于静态卡片内部和提供方应用间的交互,当前支持 router、message 和 call 三种类型的事件
FormMenu支持应用内长按菜单快捷添加卡片到桌面

安全

组件名称作用
PasteButton安全控件的粘贴按钮,用户通过点击该粘贴按钮,可以临时获取读取剪贴板权限
SaveButton安全控件的保存控件,用户通过点击该保存按钮,可以临时获取存储权限,而不需要权限弹框授权确认

主题

组件名称作用
WithTheme用于设置应用局部页面自定义主题风格,可设置子组件深浅色模式和自定义配色

原子化服务

组件名称作用
AtomicServiceNavigation作为 Page 页面的根容器使用,其内部默认包含了标题栏、内容区,其中内容区默认首页显示导航内容或非首页显示(NavDestination 的子组件),首页和非首页通过路由进行切换
AtomicServiceTabsAtomicServiceTabs 高级组件,对 Tabs 组件一些不需提供给用户自定义设计的属性进行简化,限制最多显示 5 个页签,固定页签样式,位置和大小
AtomicServiceWeb为开发者提供满足定制化诉求的 Web 高阶组件,屏蔽原生 Web 组件中无需关注的接口,并提供 JS 扩展能力
InterstitialDialogActionInterstitialDialogAction 弹框在元服务中用于在保持当前的上下文环境时,临时展示用户需关注的信息或待处理的操作,用户点击弹框的不同区域可以触发相应的动作
FullScreenLaunchComponent全屏启动元服务组件,当被拉起方授权使用方可以嵌入式运行元服务时,使用方全屏嵌入式运行元服务;未授权时,使用方跳出式拉起元服务
NavPushPathHelper当跳转的目标 NavDestination 在不同的 hsp 分包,且未被主包依赖,首次运行元服务只会下载安装主包,需要使用 NavPushPathHelper 先下载安装相应 hsp 分包,再将指定的 NavDestination 页面信息入栈。使 Navigation 支持动态加载 hsp 分包后再跳转

自定义占位组件

组件名称作用
NodeContainer基础组件,不支持尾随添加子节点。组件接受一个 NodeController 的实例接口。需要 NodeController 组合使用
ContentSlot用于渲染并管理 Native 层使用 C-API 创建的组件

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

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

相关文章

HTTP GET报文解读

考虑当浏览器发送一个HTTP GET报文时,通过Wireshark 俘获到下列ASCII字符串: GET /cs453/index.html HTTP/1.1 Host: gaia.cs.umass.edu User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040804 Netscape/7.2 (ax) Acc…

【Linux网络】数据链路层

数据链路层 用于两个设备(同一种数据链路节点)之间进行传递。 认识以太网 “以太网” 不是一种具体的网络,而是一种技术标准;既包含了数据链路层的内容,也包含了一些物理层的内容。例如:规定了网络拓扑结…

【打破信息差】萌新认识与入门算法竞赛

阅前须知 XCPC萌新互助进步群2️⃣:174495261 博客主页:resot (关注resot谢谢喵) 针对具体问题,应当进行具体分析;并无放之四海而皆准的方法可适用于所有人。本人尊重并支持每位学习者对最佳学习路径的自主选择。本篇所列训练方…

logrotate按文件大小进行日志切割

✅ 编写logrotate文件,进行自定义切割方式 adminip-127-0-0-1:/data/test$ cat /etc/logrotate.d/test /data/test/test.log {size 1024M #文件达到1G就切割rotate 100 #保留100个文件compressdelaycompressmissingoknotifemptycopytruncate #这个情况服务不用…

2025认证杯二阶段C题完整论文讲解+多模型对比

基于延迟估计与多模型预测的化工生产过程不合格事件预警方法研究 摘要 化工生产过程中,污染物浓度如SO₂和H₂S对生产过程的控制至关重要。本文旨在通过数据分析与模型预测,提出一种基于延迟估计与特征提取的多模型预测方法,优化阈值设置&a…

前端精度问题全解析:用“挖掘机”快速“填平精度坑”的完美解决方案

写在前面 “为什么我的计算在 React Native 中总是出现奇怪的精度问题?” —— 这可能是许多开发者在作前端程序猿的朋友们都会遇到的第一个头疼问题。本文将深入探讨前端精度问题的根源,我将以RN为例,并提供一系列实用解决方案,让你的应用告别计算误差。 一、精度问题的…

2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组(国赛) 解题报告 | 珂学家

前言 题解 2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组(国赛)。 国赛比省赛难一些,做得汗流浃背,T_T. RC-u1 大家一起查作弊 分值: 15分 这题真的太有意思,看看描述 在今年的睿抗比赛上,有同学的提交代码如下&#xff1…

hghac和hgproxy版本升级相关操作和注意事项

文章目录 环境文档用途详细信息 环境 系统平台:N/A 版本:4.5.6,4.5.7,4.5.8 文档用途 本文档用于高可用集群环境中hghac组件和hgproxy组件替换和升级操作 详细信息 1.关闭服务 所有数据节点都执行 1、关闭hgproxy服务 [roothgdb01 tools]# system…

userfaultfd内核线程D状态问题排查

问题现象 运维反应机器上出现了很多D状态进程,也kill不掉,然后将现场保留下来进行排查。 排查过程 都是内核线程,先看下内核栈D在哪了,发现D在了userfaultfd的pagefault流程。 uffd知识补充 uffd探究 uffd在firecracker与e2b的架构下使…

深入解析:构建高性能异步HTTP客户端的工程实践

一、架构设计原理与核心优势 HTTP/2多路复用技术的本质是通过单一的TCP连接并行处理多个请求/响应流,突破了HTTP/1.1的队头阻塞限制。在异步编程模型下,这种特性与事件循环机制完美结合,形成了高性能网络通信的黄金组合。相较于传统同步客户…

根据台账批量制作个人表

1. 前期材料准备 1)要有 人员总的信息台账 2)要有 个人明白卡模板 2. 开始操作 1)打开 人员总的信息台账,选择所需要的数据模块; 2)点击插入,选择数据透视表,按流程操作&…

《AI大模型应知应会100篇》第65篇:基于大模型的文档问答系统实现

第65篇:基于大模型的文档问答系统实现 📚 摘要:本文详解如何构建一个基于大语言模型(LLM)的文档问答系统,支持用户上传 PDF 或 Word 文档,并根据其内容进行智能问答。从文档解析、向量化、存储到…

RTK哪个品牌好?2025年RTK主流品牌深度解析

在测绘领域,RTK 技术的发展日新月异,选择一款性能卓越、稳定可靠的 RTK 设备至关重要。2025 年,市场上涌现出众多优秀品牌,本文将深入解析几大主流品牌的核心竞争力。 华测导航(CHCNAV):技术创…

SpringCloud微服务开发与实战

本节内容带你认识什么是微服务的特点,微服务的拆分,会使用Nacos实现服务治理,会使用OpenFeign实现远程调用(通过黑马商城来带你了解实际开发中微服务项目) 前言:从谷歌搜索指数来看,国内从自201…

pgsql14自动创建表分区

最近有pgsql的分区表功能需求,没想到都2025年了,pgsql和mysql还是没有自身支持自动创建分区表的功能 现在pgsql数据库层面还是只能用老三样的办法来处理这个问题,每个方法各有优劣 1. 触发器 这是最传统的方法,通过创建一个触发…

math toolkit for real-time development读书笔记一三角函数快速计算(1)

一、基础知识 根据高中知识我们知道,很多函数都可以用泰勒级数展开。正余弦泰勒级数展开如下: 将其进一步抽象为公式可知: 正弦和余弦的泰勒级数具有高度结构化的模式,可拆解为以下核心特征: 1. 符号交替特性 正弦级…

uni-app 中适配 App 平台

文章目录 前言✅ 1. App 使用的 Runtime 架构:**WebView 原生容器(plus runtime)**📌 技术栈核心: ✅ 2. WebView Native 的通信机制详解(JSBridge)📤 Web → Native 调用&#xf…

SpringBoot基础(静态资源导入)

静态资源导入 在WebMvcAutoConfiguration自动配置类中 有一个添加资源的方法: public void addResourceHandlers(ResourceHandlerRegistry registry) { //如果静态资源已经被自定义了,则直接生效if (!this.resourceProperties.isAddMappings()) {logg…

基于OpenCV的人脸识别:LBPH算法

文章目录 引言一、概述二、代码实现1. 代码整体结构2. 导入库解析3. 训练数据准备4. 标签系统5. 待识别图像加载6. LBPH识别器创建7. 模型训练8. 预测执行9. 结果输出 三、 LBPH算法原理解析四、关键点解析五、改进方向总结 引言 人脸识别是计算机视觉领域的一个重要应用&…

ElasticSearch重启之后shard未分配问题的解决

以下是Elasticsearch重启后分片未分配问题的完整解决方案,结合典型故障场景与最新实践: 一、快速诊断定位 ‌检查集群状态 GET /_cluster/health?pretty # status为red/yellow时需关注unassigned_shards字段值 ‌ 2.查看未分配分片详情 …