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

相关推荐
zhanshuo6 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo6 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish79811 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw17 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos