鸿蒙 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 组件的子组件，用于显示行内文本的组件
ImageSpan	Text、ContainerSpan 组件的子组件，用于显示行内图片
ContainerSpan	Text 组件的子组件，用于统一管理多个 Span、ImageSpan 的背景色及圆角弧度
SymbolSpan	作为 Text 组件的子组件，用于显示图标小符号的组件
SymbolGlyph	显示图标小符号的组件
Hyperlink	超链接组件，组件宽高范围内点击实现跳转
RichText	富文本组件，解析并显示 HTML 格式文本
SelectionMenu	文本选择菜单，适用于 RichEditor 组件或 Text 组件

图片与视频

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

信息展示

组件名称	作用
AlphabetIndexer	可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件
Badge	信息标记组件，可以附加在单个组件上用于信息提醒的容器组件
Chip	操作块，用于搜索框历史记录或者邮件发送列表等场景
ChipGroup	ChipGroup 高级组件，提供操作块群组，用于对文件或者资源内容进行分类等场景
Counter	计数器组件，提供相应的增加或者减少的计数操作
advanced.Counter	Counter 是用于精确调节数值的组件
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 负责将其嵌入到视图中
Component3D	3D 渲染组件，可以加载 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 的子组件），首页和非首页通过路由进行切换
AtomicServiceTabs	AtomicServiceTabs 高级组件，对 Tabs 组件一些不需提供给用户自定义设计的属性进行简化，限制最多显示 5 个页签，固定页签样式，位置和大小
AtomicServiceWeb	为开发者提供满足定制化诉求的 Web 高阶组件，屏蔽原生 Web 组件中无需关注的接口，并提供 JS 扩展能力
InterstitialDialogAction	InterstitialDialogAction 弹框在元服务中用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户点击弹框的不同区域可以触发相应的动作
FullScreenLaunchComponent	全屏启动元服务组件，当被拉起方授权使用方可以嵌入式运行元服务时，使用方全屏嵌入式运行元服务；未授权时，使用方跳出式拉起元服务
NavPushPathHelper	当跳转的目标 NavDestination 在不同的 hsp 分包，且未被主包依赖，首次运行元服务只会下载安装主包，需要使用 NavPushPathHelper 先下载安装相应 hsp 分包，再将指定的 NavDestination 页面信息入栈。使 Navigation 支持动态加载 hsp 分包后再跳转

自定义占位组件

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