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