一、组件分类总结

1. 媒体类：Swiper 轮播、Video 视频、Image 图片
2. 文本输入类：Text 静态文字、TextInput 输入框
3. 交互按钮类：Button 按钮、Radio 单选框、Toggle 开关
4. 页面切换类：Tabs 选项卡

二、各组件用途 + 最简示例代码

1. 轮播图 Swiper

作用：首页广告、图片自动滑动切换

存放多张图片自动滑动，图片放入 resources/base/media，使用 $r("app.media.图片名") 引用。

核心 API 说明

• autoPlay(true)：自动播放，默认 false 关闭；
• loop(true)：循环轮播，滑到末尾回到第一张；
• interval(3000) 可额外添加，控制每张图停留 3000 毫秒（3 秒）。

2. 视频 Video

作用：本地 / 网络视频播放，配套VideoController控制播放暂停

注意：预览器无法查看视频

视频文件放入 resources/base/rawfile/bb.mp4，搭配 VideoController 控制播放暂停。

文件存放规则：本地 mp4 视频必须放在resources/base/rawfile文件夹，用$rawfile("视频名.mp4")读取，和图片文件夹严格区分，不能混淆。

3. 图片 Image

作用：展示本地 / 网络图片资源，网络图片（需INTERNET权限）

• 本地静态图：$r("app.media.xxx")，存放在 media 文件夹，无网络也能加载；
• 网络在线图：直接传入 http/https 完整图片链接。
• .borderRadius(宽高一半是圆) 设置圆角、.objectFit(ImageFit.Cover) 图片铺满不拉伸变形。

4. 选项卡 Tabs + TabContent

作用：多页面分类切换（首页 / 我的 / 消息）

多页面底部 / 顶部导航，由 Tabs + TabContent 组成，.tabBar() 传字符串做导航文字。

强制语法结构

• 外层必须有且仅有一个Tabs()根容器；
• 每一个切换页面单独用TabContent(){}包裹；
• .tabBar("文字") 给每个页面设置导航按钮文字，禁止直接传入 Text 组件，会编译报错。

5. 文本 Text / 输入框 TextInput

• Text：纯静态展示文字，设置字号、颜色、间距；
• TextInput：用户输入框，@State 绑定值，.onChange 监听输入变化。
• 功能：表单填写、搜索框、留言输入，接收用户手动输入文字；
• 双向绑定逻辑：搭配@State修饰变量，text:this.inputVal绑定内容，.onChange()实时监听用户输入，变量同步更新；
• 占位提示placeholder：输入框空白时显示浅灰色提示文字，引导用户输入内容；
• 拓展类型：.type(InputType.Number) 限制只能输入数字、.type(InputType.Password) 密码框隐藏文字。

6. 交互选择组件

• Button 按钮：.onClick 监听点击事件，触发弹窗、跳转、修改状态；
• Radio + RadioGroup 单选框：同一 group 实现多选一，.onChange 获取选中值；
• Toggle 开关：设置页常用切换控件，布尔值控制开关状态。

单选框 Radio + RadioGroup

作用：多选一选择（性别、分类单选）

Toggle 开关组件

作用：开关切换（设置页开启 / 关闭功能）

三、通用开发注意点

1. 网络图片 / 网络视频必须在module.json5添加网络权限 ohos.permission.INTERNET；
2. 本地资源：图片放media、视频放rawfile，引用路径不能写错；
3. 所有可交互组件（Button/Toggle/Radio）通过@State修饰变量实现状态刷新；
4. Swiper/Video 自带自动播放、循环、控制器等拓展 API，适合首页多媒体场景。

四、页面的跳转，弹窗

@State 状态、onClick 点击、onChange 变化、AlertDialog 弹窗、router 页面跳转

• @State：管理输入框、单选框响应式数据，数据修改自动刷新页面；
• onChange：输入框输入、单选框切换时触发，监听数值变化；
• onClick：所有按钮点击触发，用于弹窗、路由跳转；
• 弹窗：
  • AlertDialog：系统极简提示弹窗，无需额外定义组件；
  • @CustomDialog：完全自定义样式弹窗，配合CustomDialogController控制开关；
  • 
• 路由 router：pushUrl()跳新页面并传参，back()返回上一页，目标页aboutToAppear生命周期接收参数。

文字切换