鸿蒙 ArkUI 常用组件体系总结

鸿蒙 ArkUI 提供了丰富的 UI 组件,涵盖了布局、基础 UI、输入、容器、手势、动画、高级组件、网络与存储、适配等多个方面。以下是完整的 ArkUI 控件总结,方便你快速查阅和理解鸿蒙的 UI 组件体系。


📌 1. 布局控件(Layout Components)

控件 作用
Row 横向排列 子组件
Column 纵向排列 子组件
Flex 弹性布局 ,支持主轴对齐、换行、自动填充
List 滚动列表 ,适用于数据较多的列表
ListItem List 的子项,每个列表项
Grid 网格布局,支持多列显示
Stack 层叠布局,子组件可自由重叠
Tabs 选项卡布局,用于页面切换
Scroll 滚动视图 ,可支持横向/纵向滚动
Swiper 轮播图 ,用于多张图片/页面的切换
Divider 分割线 ,用于区分不同内容区域
Panel 可折叠面板 ,用于展开/收起内容

📌 2. 基础 UI 控件(Basic UI Components)

控件 作用
Text 文本显示 ,支持字体、颜色、样式
Image 图片显示,支持本地/网络图片
Button 按钮 ,用于点击交互
Icon 图标,内置常用图标,可自定义
Badge 徽章 ,用于显示通知数字/状态
Marquee 跑马灯 ,用于滚动显示文本
Progress 进度条 ,支持线性进度、环形进度
Loading 加载动画,用于显示加载状态
Rating 评分组件 ,用于展示/输入评分
Divider 分割线 ,用于区分内容区域

📌 3. 输入控件(Form Components)

控件 作用
TextInput 文本输入框 ,支持单行/多行输入
Search 搜索框 ,带搜索图标
DatePicker 日期选择器 ,支持年月日选择
TimePicker 时间选择器 ,支持时分秒选择
Checkbox 复选框 ,用于多选
Radio 单选框 ,用于单选
Toggle 开关按钮 ,用于开/关状态切换
Slider 滑动条 ,用于音量、亮度等调节
Picker 滚动选择器 ,适用于省市区、数字选择

📌 4. 容器控件(Container Components)

控件 作用
Navigation 导航栏 ,用于页面跳转
TabBar 底部导航栏 ,用于切换不同页面
Toolbar 顶部工具栏 ,可放置标题、按钮
Dialog 弹窗 ,用于确认/提示用户
Popover 弹出框 ,用于菜单或提示
Sheet 底部弹出菜单
SideBar 侧边栏 ,用于导航菜单

📌 5. 手势与动画(Gesture & Animation)

控件 作用
Gesture 手势识别(点击、滑动、长按)
Draggable 拖拽组件 ,可用于拖拽排序
Transition 动画过渡效果
AnimationController 动画控制器 ,用于复杂动画
MotionPath 路径动画 ,让元素沿自定义路径运动

📌 6. 高级控件(Advanced Components)

控件 作用
Web 嵌入网页,显示 HTML 内容
Canvas 自定义绘制,适用于绘图
Video 视频播放
Map 地图组件
QRCode 二维码扫描与生成

📌 7. 状态管理(State Management)

方式 作用
@State 组件内部状态,组件变化时自动更新 UI
@Prop 父组件向子组件传值
@Link 双向绑定
@Observed 监听对象的变化,更新 UI
@ObjectLink 更复杂的数据绑定

📌 8. 网络请求与数据存储

方式 作用
HttpRequest 进行 HTTP 请求,支持 GET/POST
DataStore 轻量级本地存储(类似 SharedPreferences)
SQLite 本地数据库存储
File 读写本地文件
WebSocket 长连接,如聊天功能

📌 9. 适配与多端支持

技术点 作用
Breakpoint 屏幕断点适配
WindowSizeClass 根据设备窗口大小适配 UI
@MediaQuery 适配不同屏幕尺寸
MultiDeviceSync 多设备协同(手机、平板、智能手表)
ArkTS 一次开发,多端运行

✅ 总结

鸿蒙 ArkUI 组件体系非常丰富,可以满足布局、基础 UI、输入、动画、存储、网络请求、适配等各种需求。

相关推荐
搞瓶可乐2 小时前
鸿蒙ArkUI实战之TextArea组件、RichEditor组件、RichText组件、Search组件的使用
华为·harmonyos·arkui·搜索框·富文本组件·富文本输入框·鸿蒙原生api
孤寂码农_defector2 小时前
鸿蒙系统的 “成长烦恼“:生态突围与技术迭代的双重挑战
macos·华为·objective-c·cocoa·harmonyos
别说我什么都不会3 小时前
【仓颉三方库】 数据解析——TOML4CJ
harmonyos
鸿蒙布道师4 小时前
鸿蒙NEXT开发LRUCache缓存工具类(单例模式)(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
城中的雾5 小时前
HarmonyOS Next 编译之如何构建不同包名应用
harmonyos·arkts
别说我什么都不会5 小时前
【仓颉三方库】 数据解析—— jwt4cj
harmonyos
周胡杰7 小时前
鸿蒙-跨设备互通,设备互通提供跨设备的相机、扫描、图库访问能力,平板或2in1设备可以调用手机的相机、扫描、图库等功能。
数码相机·华为·自动化·电脑·harmonyos·鸿蒙·鸿蒙系统
SuperHeroWu77 小时前
【HarmonyOS 5】VisionKit人脸活体检测详解
华为·harmonyos·人脸活体检测·visionkit
别说我什么都不会10 小时前
【仓颉三方库】 数据解析—— html4cj&asn1-cj
harmonyos
九丘教育13 小时前
【仓颉 + 鸿蒙 + AI Agent】CangjieMagic框架(17):PlanReactExecutor
人工智能·华为·harmonyos