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 创建的组件 |
