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