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

相关推荐
盐焗西兰花3 小时前
鸿蒙学习实战之路-Reader Kit修改翻页方式字体大小及行间距最佳实践
学习·华为·harmonyos
lbb 小魔仙7 小时前
【HarmonyOS实战】React Native 表单实战:在 OpenHarmony 上构建高性能表单
react native·华为·harmonyos
一只大侠的侠9 小时前
React Native开源鸿蒙跨平台训练营 Day16自定义 useForm 高性能验证
flutter·开源·harmonyos
早點睡39010 小时前
高级进阶 React Native 鸿蒙跨平台开发:@react-native-community-slider 滑块组件
react native·react.js·harmonyos
一只大侠的侠10 小时前
Flutter开源鸿蒙跨平台训练营 Day11从零开发商品详情页面
flutter·开源·harmonyos
一只大侠的侠11 小时前
React Native开源鸿蒙跨平台训练营 Day18自定义useForm表单管理实战实现
flutter·开源·harmonyos
一只大侠的侠11 小时前
React Native开源鸿蒙跨平台训练营 Day20自定义 useValidator 实现高性能表单验证
flutter·开源·harmonyos
听麟12 小时前
HarmonyOS 6.0+ 跨端智慧政务服务平台开发实战:多端协同办理与电子证照管理落地
笔记·华为·wpf·音视频·harmonyos·政务
前端世界12 小时前
从单设备到多设备协同:鸿蒙分布式计算框架原理与实战解析
华为·harmonyos
一只大侠的侠13 小时前
Flutter开源鸿蒙跨平台训练营 Day12从零开发通用型登录页面
flutter·开源·harmonyos