一、 轮播图 Swiper

1.介绍 ：滚动轮播容器，横向滑动切换多张图片 / 页面，自带滑动动画。

2.核心属性

• index：默认展示第几张

• autoPlay：是否自动轮播

• interval：自动切换间隔时间

• loop：是否循环播放  

3.对应文件 SwiperDemo.ets、SwiperDemo2.ets

4.使用场景 ：首页广告横幅、图片相册滑动展示

二、视频 Video

1.介绍 ：多媒体视频播放组件，加载本地 / 网络 mp4 视频，搭配控制器控制播放暂停。

2.核心配套 VideoController：控制播放、暂停、跳转进度；$r("rawfile","文件名") 读取本地视频资源

3.使用场景 ：播放教程视频、首页宣传短片

1.videoSrc：本地视频资源

$rawfile('1.mp4')：读取项目 entry/src/main/resources/rawfile/ 文件夹下的1.mp4视频文件

类型Resource，专门存放本地静态资源
2.pict：视频封面图（预览图）
$r('app.media.Angelababy')：读取 entry/src/main/resources/base/media/ 下名为Angelababy的图片，作为视频未播放时的封面
3.controller：视频控制器VideoController
用来代码控制视频：播放、暂停、跳转进度、切换全屏等，必须传给Video组件才能操作视频

1.Video 组件构造参数
Video({src, previewUri, controller}) 视频播放器核心配置：
src: this.videoSrc：绑定本地视频资源，播放1.mp4
previewUri: this.pict：绑定封面图片，视频加载 / 未播放时显示这张图
controller: this.controller：绑定控制器实例，实现代码操控视频
2. Video 链式属性（播放器行为配置）
.height('30%')：播放器高度占父容器 30% 宽度自适应
.muted(true)：静音播放，默认没有声音
.loop(true)：循环播放，视频播放完自动从头重播
.autoPlay(false)：禁止自动播放，进入页面不会自动播放，需要手动点播放
.controls(true)：显示系统自带播放控制面板（播放 / 暂停、进度条、音量、全屏按钮）

三、 图片 Image

1.介绍： 图片渲染组件，展示本地 rawfile 图片、网络图片、图标。

2.资源写法

• 本地资源：$r("rawfile","图片名")

• 网络图片：填写图片 URL 地址  常用属性 .width()/.height()、.borderRadius()圆角、.objectFit()填充模式

3.对应文件 ImageDemo1.ets、ImageDemo2.ets、ImageSteck.ets（Stack 叠加图片案例）

4.使用场景 头像、商品图、页面背景、图标

样式属性：
width('50%')：宽度占父容器 50%
height(200)：固定高度 200vp
borderRadius(15)：图片圆角 15vp
objectFit(ImageFit.Cover)：图片等比例铺满容器，超出部分裁剪（不会拉伸变形）

1.本地图片加载两种规范

◦ $r('app.media.图片名')：加载 media 目录图片（本代码使用）

◦ $rawfile('图片名.png')：加载 rawfile 文件夹资源  

2. Image 核心属性

◦ objectFit(ImageFit.Cover)：常用等比例填充、裁剪适配；

◦ borderRadius：实现图片圆角； ◦ 宽高支持固定数值 200 或百分比 '50%'。  

3. 布局容器

◦ Column：垂直上下排列，space 设置子组件间距；

◦ Row：水平左右并排。  

4. Text 文本常用：字号、加粗、居中、内边距 padding。

fontSize(30)：文字大小 30vp
fontWeight(FontWeight.Bolder)：字体加粗
width('100%')：文本宽度占满父容器
textAlign(TextAlign.Center)：文字水平居中
padding(20)：文字四周内边距 20

Stack 内所有组件默认居中堆叠，后写的组件覆盖在先写的组件上方：
1.底层 Image 背景图
$r('app.media.background')：加载 media 文件夹里名为 background 的图片
width(320) / height(180)：图片固定宽高
borderRadius(15)：图片整体圆角 15vp
objectFit(ImageFit.Cover)：图片等比例填满容器，超出部分裁剪，不变形
2.上层悬浮 Text 文字
浮在图片正中间：
fontColor(Color.White)：文字白色
backgroundColor(0x55000000)：半透明黑色背景（十六进制前两位是透明度 55，后面 000000 黑色）
padding(10)：文字四周内边距
borderRadius(8)：文字块圆角

四、选项卡 Tabs

1.介绍 ：多标签分页组件，顶部 / 底部切换不同内容页面，由 Tabs + TabBar + TabContent 组合使用。 逻辑 TabBar 显示标签文字，TabContent 存放每个标签对应的页面内容

2.对应文件 TabsBase1.ets、tabsBase2.ets

3.使用场景 ：APP 底部导航（首页 / 消息 / 我的）、分类标签页

核心属性 .barPosition(BarPosition.Start)
BarPosition.Start：导航栏放在页面顶部（对应效果图，标签文字在屏幕最上方）
可选值补充：
BarPosition.End：导航栏放到页面底部（常用底部 Tab 栏）

Tabs + TabContent 固定搭配
Tabs：外层容器，控制导航栏位置、切换动画；
TabContent：每一页的内容载体，.tabBar() 定义导航文字。
barPosition 控制导航栏上下位置
Start = 顶部导航（本案例）
End = 底部导航（APP 常见底部菜单）

1. ForEach 循环渲染
ForEach(数组, (单项)=>{组件})
遍历图片数组，自动生成多张 Image 图片放入 Swiper，不用重复写 Image 标签。
2. Swiper 轮播属性
.autoPlay(true)：页面加载自动轮播
.interval(1000)：每张图停留 1 秒切换
.loop(true)：最后一张切回第一张，无限循环
.objectFit(ImageFit.Cover)：图片等比例填充不变形，圆角 20

BarPosition.Start：把导航标签栏固定在页面顶部，对应预览器上方的 4 个菜单

五、 文本

Text / 输入框 TextInput

（1）Text 文本组件 基础文字展示控件，仅用于静态文字展示。

属性：.fontSize()字号、.fontColor()文字颜色、.fontWeight()加粗

对应文件：Text2.ets、TextDemo.ets、TextDemo2.ets

场景：标题、提示文字、页面说明

placeholder：输入框空白时显示的灰色提示文字
.type()：控制弹出手机键盘类型，是核心区分点

InputType.Normal：弹出全键盘，支持汉字、字母、符号，适合姓名。

InputType.Number：只弹出数字键盘，只能输入 0-9 数字，适合年龄、数量

InputType.PhoneNumber：数字键盘，适配手机号输入逻辑。

InputType.Email：键盘自带@符号，方便输入邮箱地址

（2）TextInput 输入框 接收用户手动输入文字，表单核心组件。

关键方法：.onChange() 监听输入内容变化属性：.type(InputType.Password) 密码隐藏模式

对应文件：所有 Login 登录文件、InfoFormPage.ets、Register.ets

场景：账号、密码、留言、搜索框

Radio 单选框核心规则
group 属性是分组关键
两个 Radio 写同一个 group:'gender'，代表为同一组单选，只能选一个，互斥切换；
value：当前选项标识值（选中后拿到 ' 男'/' 女 '）；
.checked(false)：页面初始默认不选中；
Row 水平排列：文字、单选圆圈、选项文字横向并排。

group='education'：4 个学历选项归为同一组，只能单选一个；
拆两行 Row 展示：第一行「高中、大专」，第二行「本科、硕士」；
.layoutWeight(1)：自动占满剩余垂直空白，上下撑开间距

margin 底部外边距 30，和屏幕底部留出空隙

import：导入系统内置路由工具包
@ohos.router：鸿蒙官方页面跳转 API，负责不同页面之间切换

.onClick()：给 Text 绑定点击事件，点击后执行内部代码
router.pushUrl()：路由跳转核心方法
作用：打开新页面，保留当前页面在路由栈（返回键能回到注册页）
url:'pages/Logins'：目标页面路径，对应左侧文件列表里的 Logins.ets

@State isOn: boolean=false;
@State：装饰响应式状态变量，变量变更时页面 UI 自动刷新
isOn：控制「记住密码」开关状态，默认false= 关闭

.type(InputType.Password)：密码模式，输入内容自动黑点隐藏

ToggleType.Switch：开关样式组件，绑定状态this.isOn
.onChange((val)=>{})：开关切换触发回调
val 是布尔值：true打开、false关闭
修改this.isOn同步更新 UI 状态
console.log：控制台打印开关状态，调试用
Row水平布局：开关 + 「记住密码」文字并排

六、按钮 Button

1.介绍 可点击交互按钮，接收点击事件执行逻辑。

2.核心事件 .onClick()：点击后触发代码（页面跳转、弹窗、登录校验）

3.样式属性 :宽高、圆角 .borderRadius()、背景色 .backgroundColor()

4.对应文件 ButtonDemo1.ets、ButtonDemo2.ets

5.使用场景：登录、注册、提交、返回、确认按钮

Column({space:20})：垂直排列，按钮上下间距 20vp
.justifyContent(FlexAlign.Center)：所有按钮整体在屏幕垂直居中

backgroundColor(Color.Transparent)：背景完全透明
.border({width:2,color:0X007DFF})：设置 2px 蓝色外边框
fontColor(Color.Black)：文字黑色
圆角 15（小圆角，方形线框按钮）

七、 单选框 Radio

1.介绍 单选选择组件，同组内只能选中一个选项，常搭配 RadioGroup 使用。 逻辑 通过 value 区分选项，选中后获取对应值

2.对应文件 RadioDemo1.ets、RadioDemo2.ets

3.使用场景 :性别选择、单一选项问卷、类型单选

4 个 Radio group 全部相同radioGroup1，属于同一组单选，只能选中一个
.checked(true)：页面加载默认选中第二项Radio2
垂直排列，每个单选圆圈宽高 30vp

外层 Column({space:30})：所有表单项上下间距 30vp
.justifyContent(FlexAlign.Center)：表单整体在屏幕垂直居中
.alignItems(HorizontalAlign.Start)：内部所有内容左对齐
backgroundColor(0xf4f4f4)：页面浅灰色底色

group="edu" 全新分组，和性别单选互不干扰

表单组件组合：
TextInput：单行文本录入（姓名、年龄）
Radio：单一选项选择（性别、学历）
Button：表单提交触发按钮

八、 Toggle 开关组件
1.介绍:滑动开关，布尔型选择，只有开启 / 关闭两种状态。
2.监听事件
.onChange((isOn:boolean)=>{}) 获取开关状态
3.对应文件:ToggleDemo.ets
4.使用场景:设置页功能开关（消息推送、夜间模式）

type:ToggleType.Switch：组件类型为滑动开关（手机常见的设置项开关）
isOn:true：页面初始化默认打开（滑块滑到右侧，激活状态）
.width(150) .height(50)：开关尺寸宽 150、高 50
.selectedColor(Color.Red)：开关打开时的背景色为红色
.id('n1')：给组件设置唯一标识 ID，后续可代码获取组件实例

两种类型区分
ToggleType.Switch：长条滑动开关，多用于设置类功能（记住密码、推送开关）
ToggleType.Checkbox：方形勾选框，多用于多选项多选场景
isOn 控制初始状态
true = 开启 / 勾选
false = 关闭 / 未勾选
.selectedColor()：自定义选中激活时的主题颜色
.id()：组件唯一标识，用于逻辑代码获取控件操作