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