1. Image 图片组件

Image 是页面最基础的视觉组件,支持加载本地资源图、网络图片,可自由设置尺寸、圆角、缩放模式,头像、图标、背景图都依靠它实现,是页面视觉美化的必备组件。

2. Video 视频组件

专门用于视频播放,支持本地rawfile视频与网络视频源,自带播放、暂停、进度控制等基础能力,可完成短视频、宣传视频、课程视频等播放业务。

3. Swiper 轮播图组件

容器型组件,可嵌套图片、文本等内容,自带自动轮播、循环滑动、指示器圆点,普遍用于首页 Banner 广告、图片相册、焦点资讯展示,是移动端首页标配组件。

4.Tabs 选项卡组件

Tabs容器与TabContent内容页组成,可在顶部 / 底部放置标签栏,点击标签即可横向切换不同内容页面。常用于 APP 底部导航、分类菜单栏,能高效完成多模块内容分区展示。

5. Text 文本 / TextInput 输入框

Text 负责静态文字展示,可自定义字号、颜色、字重、对齐方式;TextInput 为交互式输入框,支持账号、密码、数字、邮箱等多类型键盘,是表单采集信息的核心组件。

6. Button 按钮组件

页面核心触发控件,支持自定义圆角、背景色、尺寸,搭配onClick点击事件,可绑定提交、跳转、重置等业务逻辑,是所有交互行为的入口。

7. Radio 单选框

同组 Radio 互斥选中,多用于性别、学历、单选选项场景,依靠状态变量记录选中值,搭配表单完成单一选项选择。

8. Toggle 开关组件

布尔型开关控件,只有开启 / 关闭两种状态,适合设置类页面,例如消息通知、夜间模式、权限开关等功能场景。

总结

以上 8 类组件覆盖了鸿蒙 APP 开发 90% 的基础 UI 场景:图片、视频、轮播负责内容展示,选项卡负责页面导航,文本输入框、按钮、单选框、Toggle 负责用户交互。实际开发中,结合 Column 垂直布局、Row 横向布局、Stack 层叠布局进行组件嵌套,就能组合出完整的业务页面。熟练掌握每类组件的属性与用法,是鸿蒙应用开发入门的核心基石。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐