鸿蒙 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、输入、动画、存储、网络请求、适配等各种需求。

相关推荐
0x044 小时前
鸿蒙应用开发笔记:签名文件
harmonyos
马剑威(威哥爱编程)5 小时前
【鸿蒙开发案例篇】鸿蒙6.0计算器实现详解
华为·harmonyos
用户764932807685 小时前
HarmonyOS6.0开发之Select组件,就像一个“会收缩的魔法抽屉”
harmonyos
用户764932807685 小时前
一文彻底搞明白HarmonyOS6.0基础之ArkTS中的所有循环语句
harmonyos
用户764932807685 小时前
HarmonyOS6.0开发之记忆翻牌游戏,轻松拿捏!
harmonyos
晚霞的不甘5 小时前
[鸿蒙2025领航者闯关]鸿蒙实战终极篇:构建全场景智能应用的工程化体系与生态融合
华为·harmonyos
waeng_luo6 小时前
[鸿蒙2025领航者闯关] HarmonyOS服务卡片实战
harmonyos·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
晚霞的不甘6 小时前
[鸿蒙2025领航者闯关]鸿蒙实战高阶:Stage模型架构与元服务开发深度解析
华为·架构·harmonyos
w_zero_one6 小时前
ArkTS鸿蒙--关系型数据库的级联
数据库·harmonyos
L、2186 小时前
Flutter 与 OpenHarmony 的“共生进化论”:从技术融合到生态共建
javascript·flutter·华为·智能手机·electron·harmonyos