组件基本介绍
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 层叠布局进行组件嵌套,就能组合出完整的业务页面。熟练掌握每类组件的属性与用法,是鸿蒙应用开发入门的核心基石。
更多推荐


所有评论(0)