页面的构成和视频组件
一、页面基本结构
每个 ArkUI 页面都是一个被 @Entry 和 @Component 修饰的 struct 结构体，UI 代码写在 build() 方法里。@Entry 标记页面入口，@Component 声明自定义组件。
二、Column 垂直布局
Column 会让子组件从上到下依次排列，是最常用的页面整体布局容器。可以通过链式调用的方式设置宽高、内边距、背景色等属性。
三、Text 文本组件
Text 用于显示文字内容。常用属性包括 fontSize 控制字体大小、fontWeight 控制粗细、fontColor 设置颜色、margin 设置外边距。链式写法是 ArkUI 的标准风格。
四、Image 图片组件
Image 通过 $r() 引用 resources 目录下的图片资源。常用属性有 width 和 height 控制尺寸、borderRadius 设置圆角、objectFit 控制图片填充方式，Cover 会等比缩放并裁剪填满容器。
五、Stack 层叠布局
Stack 让子组件层叠显示，后写的组件在上层，适合做图片加水印、文字浮在图片上等效果。注意子组件必须写在 Stack(){} 的大括号内部，写在外部不会显示。
六、Radio 单选按钮
Radio 通过 value 和 group 两个参数来工作。同一个 group 名称下的多个 Radio 构成一组，同一组只能选中一个。checked(true) 表示默认选中，checked(false) 表示未选中。不同组的 Radio 互不影响，比如学历和性别可以分别用不同的 group 名。
七、Button 按钮组件
Button 用来触发用户操作。可以设置宽高、字体大小、背景图、圆角等样式。实际开发中配合 onClick 事件来处理点击逻辑。
八、ArkUI 的链式语法规则
ArkUI 所有组件的属性都通过英文句点链式调用，不能像传统写法那样分开赋值。这是 ArkTS 声明式 UI 的核心特征，所有样式、事件、布局参数都靠这种链式写法串联。
九、常见错误
Stack 的子组件写在花括号外面导致不显示。Radio 的 group 名称不一致导致无法单选。图片路径错误导致图片不显示。忘记链式调用导致样式不生效。
十、总结
ArkUI 开发的核心是组件加布局加链式属性。掌握 Column、Row、Stack 三大布局和 Text、Image、Radio、Button 等基础组件，就能完成大部分界面开发任务。多写多练是熟悉这套语法的关键。
HarmonyOS ArkUI 视频播放器实战知识点解析
一、组件基本结构与装饰器
代码定义了一个名为Index的自定义组件。开头的@Entry装饰器标记该组件为页面的入口，负责承载整个页面的UI；@Component装饰器则表明这是一个自定义的可复用组件。struct Index使用 TypeScript 的 struct 语法来声明组件结构，内部的build()方法是UI描述的主体，所有视觉元素都在其中通过链式调用构建。
二、VideoController 控制器的初始化与作用
在struct Index内部，声明了一个私有成员变量videoSrc，类型为VideoController，并通过new VideoController()进行了实例化。这是视频播放控制的核心。在 ArkUI 中，Video 组件本身不直接处理播放逻辑，而是通过controller属性将控制权委托给VideoController实例。后续的播放、暂停、跳转等操作，都需要通过这个实例来完成，实现了UI展示与逻辑控制的分离。
三、视频资源与封面图的引用方式
在Video组件的构造参数中，展示了两种不同的资源引用方式：
视频源 (
src)：使用了$rawfile("bb.mp4")。$rawfile用于访问entry/src/main/resources/rawfile目录下的原始资源文件。这种方式常用于打包在应用安装包内的本地视频，不需要经过资源管理系统的编译转换，读取速度快，适合存放较大的媒体文件。预览图 (
previewUri)：使用了$r('app.media.background')。$r是标准的资源引用方式，这里指向了resources/base/media目录下的图片资源。当视频尚未开始播放时，系统会显示这张图片作为封面，提升用户体验，避免黑屏。
四、核心属性配置与链式调用
代码中展示了 ArkUI 典型的链式语法风格，用于设置组件的样式和行为：
宽高设置：
.width("100%")使视频宽度占满父容器，height(220)则固定高度为220vp（虚拟像素）。这是非常关键的一点，Video 组件必须显式设置宽高，否则可能无法渲染。填充模式：
.objectFit(ImageFit.Contain)决定了视频内容如何适应容器尺寸。Contain表示保持宽高比，完整显示视频内容，可能会在上下或左右留有黑边；与之相对的是Cover，会裁剪视频以填满容器。对齐与间距：上方的
Text组件使用了.textAlign(TextAlign.Center)实现居中对齐；下方的Row容器使用了{ space: 30 }参数，设置了内部子组件（Button）之间的间距为30vp；最外层Column使用了.padding(15)设置内边距，使内容不紧贴屏幕边缘。
五、交互按钮的布局
在Video组件下方，使用Row布局放置了两个Button组件，分别显示“播放”和“暂停”。虽然截图中省略了onClick事件的具体逻辑，但按照 ArkUI 的交互规范，这两个按钮通常需要绑定点击事件，并在回调函数中调用this.videoSrc.start()和this.videoSrc.pause()来控制视频播放状态。
六、总结
这段代码展示了一个标准的本地视频播放器页面结构：使用Column作为垂直布局容器，顶部是标题文本，中间是Video组件（配置了控制器、资源、尺寸和封面），底部是操作按钮。掌握这种组件组合与属性配置方式，就能快速构建出基础的视频播放功能。后续扩展方向可包括添加进度条（Slider）、全屏控制、网络视频加载及状态监听等。