一、Video 视频组件

1.组件基础说明：

Video 是鸿蒙提供的视频播放内置组件，支持本地 rawfile 视频、网络在线视频两种播放源，搭配VideoController实现播放控制，自带封面、循环、静音、控制器等属性。

2.核心对象与变量：

VideoController 视频控制器作用：操控视频播放、暂停、进度跳转，是 Video 组件必传参数

3. 本地视频资源 rawfile

存放路径：entry/src/main/resources/rawfile/bb.mp4

读取方式：$rawfile('视频文件名.mp4')，类型为Resource

4. 视频封面图片 media 资源:

private pict:Resource=$r('app.media.background')

5.Video 构造参数

Video({ src: 视频资源, // 必填，视频来源（本地Resource / 网络string） previewUri: 封面图资源, // 可选，视频未播放时展示封面 controller: 控制器对象 // 必填，提供播放控制能力 })

6.Video 通用属性:

.height() / .width()设置视频宽高，支持百分比

.muted(boolean)是否静音播放/ 固定数值

.loop(boolean)是否循环播放

.autoPlay(boolean)页面加载完成自动播放

.borderRadius(数值)视频圆角

7.例子：

二、@Event 事件装饰器

1.基础概念：

 事件：用户和页面交互产生的动作，比如输入文字、点击按钮、滑动、输入框内容改变等。

事件绑定两种形式 内置组件链式事件：onClick / onChange（系统自带，无需@Event） @Event自定义组件传事件：父子组件通信，子组件触发事件传给父组件，核心装饰器

2.常用内置原生事件

.onChange(value: string) 输入框内容改变事件

触发时机：输入框文字发生修改时执行回调

参数 value：输入框最新文本

作用：实时同步输入内容到@State变量，实现双向数据绑定效果。

.onClick(()=>{}) 点击事件

触发时机：按钮、文本等组件被点击

无参数，内部编写点击逻辑：登录校验、清空输入框、弹窗提示。

弹窗工具：AlertDialog.show ()

点击后弹出提示框，接收 title（标题）、message（提示内容）参数。

3.状态管理前置：@State

@State：组件内部响应式变量，变量更新页面自动刷新；

输入框onChange修改

@State变量，UI 同步更新； 清空按钮赋值空字符串，输入框内容立刻清空。

4.@Event 装饰器核心知识点

作用：用于自定义子组件向外派发事件，实现子组件通知父组件执行逻辑，类似前端自定义事件。

使用三步语法 ：父组件定义回调函数； 子组件用 @Event 装饰自定义事件变量； 子组件内部调用 this.自定义事件() 触发父组件方法。

5.清空按钮：

Button("立即清空") .onClick(()=>{ this.username="" this.password="" })

6.例子

三、切换按钮组件

1.组件概述：Toggle 是鸿蒙 ArkTS 提供的切换选择组件，支持三种样式：开关、复选框、单选框，用于布尔型选择（开启 / 关闭、勾选 / 不勾选）。

2.构造参数（必填）

Toggle({ type: ToggleType.xxx, // 组件类型 isOn: boolean // 默认选中状态 true选中 / false未选中 })

ToggleType 三种枚举类型

ToggleType.Switch：滑动开关（手机常用设置开关）

ToggleType.Checkbox：复选框（多选）

ToggleType.Radio：单选框（单选）

3.常用属性

.width() / .height()：设置组件尺寸

.selectedColor(颜色)：选中时的背景 / 勾选颜色

.id("标识")：给组件设置唯一 id，组件标识

.onChange((isOn:boolean)=>{})：切换状态监听事件，最常用

4.例子