一、页面基本结构每个 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装饰器标记该组件为页面的入口负责承载整个页面的UIComponent装饰器则表明这是一个自定义的可复用组件。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、全屏控制、网络视频加载及状态监听等。