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

相关推荐
用户54574834177几秒前
HarmonyOS Next应用开发实战——登录页面实现(part1)
harmonyos
用户545748341772 分钟前
HarmonyOS Next应用开发实战——底部弹框组件的实现(part1)
harmonyos
用户545748341774 分钟前
HarmonyOS Next应用开发实战——底部弹框组件的实现(part2)
harmonyos
用户545748341776 分钟前
HarmonyOS Next应用开发实战——多功能页面组件构建(part1)
harmonyos
用户545748341776 分钟前
HarmonyOS Next应用开发实战——多功能页面组件构建(part2)
harmonyos
星释16 分钟前
鸿蒙Flutter实战:18-组合而非替换,现有插件快速鸿蒙化
flutter·华为·harmonyos
90后的晨仔1 小时前
鸿蒙开发中的常见关键字简单总结
harmonyos
二流小码农1 小时前
鸿蒙开发:使用Ellipse绘制椭圆
android·ios·harmonyos
别说我什么都不会2 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起start请求
物联网·嵌入式·harmonyos
聆听秋天的风2 小时前
HarmonyOS NEXT练习:跑马灯
harmonyos