1. 轮播图 Swiper

组件标识：Swiper，容器型组件，内部可放置图片、卡片等子组件

• 核心作用：横向 / 纵向滑动切换内容，首页 Banner、活动海报、商品轮播
• 关键属性：
  • loop：是否循环轮播
  • autoPlay：自动播放开关
  • interval：自动切换间隔毫秒
  • indicator：底部小圆点指示器
  • onChange：切换页面回调事件
  • 极简示例

  • ts

    Swiper() {
      Image($r("sys.media.banner1"))
      Image($r("sys.media.banner2"))
      Image($r("sys.media.banner3"))
    }.autoPlay(true).loop(true).interval(3000)

2. 视频 Video

组件标识：Video，媒体播放组件

• 核心作用：播放本地 / 网络视频，支持进度、暂停、全屏、倍速
• 关键属性：
  • src：视频资源地址
  • controls：是否显示系统播放控制栏
  • autoPlay：自动播放
  • onFinish：视频播放完成回调

3. 图片 Image

组件标识：Image，基础图像渲染组件

• 核心作用：加载本地资源、网络图片、像素图
• 关键属性：
  • $r("sys.media.xxx")：加载项目本地图片
  • $r("http://xxx")：加载网络图片
  • objectFit：图片缩放模式（铺满 / 裁剪 / 自适应）
  • borderRadius：圆角头像、卡片图片 

4. 选项卡 Tabs

组件标识：Tabs + TabContent，分页切换容器

• 核心作用：顶部 / 底部标签切换页面，首页分类、底部导航栏
• 结构说明：
  • Tabs：外层容器，控制切换逻辑
  • TabContent：每一页对应的内容区域
• 关键属性：
  • index：当前激活页签索引
  • barPosition：标签栏在上 / 在下
  • onChange：切换页签回调
• 示例结构

ts

Tabs() {
  TabContent() { Text("首页内容") }.tabBar(Text("首页"))
  TabContent() { Text("分类内容") }.tabBar(Text("分类"))

5. 文本 / 输入框 Text / TextInput

（1）文本 Text

纯文字展示组件，仅用于静态文字展示

• 核心属性：fontSize字号、fontColor文字颜色、fontWeight加粗、textAlign对齐
• 场景：标题、说明文字、标签文案

（2）输入框 TextInput

单行文本输入控件，接收用户输入

• 核心属性：
  • placeholder：输入框提示文字
  • type：输入类型（Normal 普通、Password 密码、Number 数字、Phone 手机号）
  • maxLength：最大输入字符限制
  • onChange：输入内容实时监听

6. 按钮 Button

组件标识：Button，核心点击交互组件

• 核心作用：触发点击事件，完成提交、跳转、弹窗等操作
• 类型区分：
  • ButtonType.Normal：普通按钮
  • ButtonType.Normal：填充主按钮（确认、提交）
  • ButtonType.Outline：描边次要按钮（取消、返回）
• 关键：onClick() 点击回调事件

ts

Button("提交").onClick(()=>{
  console.info("按钮被点击")
})

7. 单选框 Radio

组件标识：Radio，配合RadioGroup使用

• 核心作用：同一分组内只能选择一个选项，互斥选择
• 使用逻辑：
  1. 外层包裹 RadioGroup，绑定选中值
  2. 内部多个 Radio 设置不同value

8. Toggle 开关组件

组件标识：Toggle，滑动开关控件

• 核心作用：布尔状态切换（开启 / 关闭）
• 关键属性：
  • isOn：绑定开关状态（true 开 /false 关）
  • type：样式（Switch 滑动开关、Checkbox 勾选框）
  • onChange：开关状态切换回调

组件使用通用规则补充

1. 组件必须放在布局容器内 所有组件（Image/Button/Text 等）不能直接放在 build 顶层，必须包裹在 Column/Row/Stack 等布局中。
2. 组件可嵌套组合 例：Stack 层叠布局内放 Image+Text 实现图片带文字；Row 水平布局放 Radio 实现一行单选。
3. 数据驱动 UI 通过@State修饰变量绑定组件状态（如 Swiper 当前索引、Toggle 开关状态、输入框文字），变量变化自动刷新界面。