在鸿蒙开发里，想做一个 界面，全靠一些 “零件” 来拼：

• 用布局搭好页面的架子
• 用文字、图片、视频填充内容
• 用按钮、开关、选项卡让界面能点、能切换

目录

• 视频：播放视频的组件。
• 图片 Image：显示图片的组件。
• 文字、文本框：Text 用来显示文字，TextInput 用来让用户输入文字。
• 按钮 Button：能点击的按钮。
• 开关 Toggle：滑动开关，控制开 / 关两种状态。
• 单选框：用复选框实现 “多个选项里只能选一个” 的效果。
• 选项卡：点一下能切换不同页面内容。

1、视频

视频组件，就是鸿蒙里用来放视频的东西。

• VideoController：视频遥控器，用来控制视频播放、暂停。
• src：告诉视频组件，要播放哪个视频文件。
• controller: this.controller：把遥控器绑定到视频上，这样才能控制它。
• width：设置视频播放器的宽度。
• height：设置视频播放器的高度。
• objectFit(ImageFit.Contain)：让视频按原比例完整显示，不被裁剪。

2、图片lmage

图片组件就是鸿蒙里用来显示图片的东西，你项目里的本地图片都靠它来展示。

• Image($r("app.media.1")) 告诉组件要显示哪张图片，这里用的是 app.media 里的图片资源。
• .width(120) / .height(120) 设置图片显示的宽和高。
• .borderRadius(10) 给图片加圆角，数字越大，角越圆。
• .objectFit(ImageFit.Cover) 图片按比例填满整个框，超出的部分会被裁剪掉，不会变形。

3、文字、文本框

文本框是用来显示文字的组件，TextInput 是用来让用户输入文字的文本框，这俩是做登录。

• .width("80%")：设置输入框宽度为屏幕的 80%
• .height(45)：设置输入框高度为 45 像素
• .border({ width: 1 })：给输入框加 1 像素宽的边框，让它看起来像个输入框
• fontWeight(FontWeight.Bold):让文字变粗体

4、按钮Button

Button 组件就是鸿蒙里用来做按钮的，比如登录、确认、退出这些能点的交互按钮，都靠它来实现。

• Button("确认") ：定义一个按钮，按钮上显示的文字是 “确认”。

• .width("60%") / .height(40) 设置按钮的宽和高：宽度占屏幕的 60%，高度是 40 像素。

• .backgroundColor(0x69B1FF) 给按钮设置背景颜色，这里是浅蓝色。

• .borderRadius(20) 给按钮加圆角，数字越大角越圆。

5、开关Toggle

Toggle 就是鸿蒙里的开关组件，用来控制 “开 / 关” 状态。

• @State status：存开关状态的变量，默认是关闭。
• isOn: this.status：让开关显示的状态跟着变量走。
• .onChange：开关滑动时，把新状态存进变量里。
• Text(...)：根据变量的值，显示 “已开启” 或 “已关闭”。

6、单选框

单选框就是 “多个选项里只能选一个”

• @State selectedId: number = 1 记录当前选中的选项 ID，默认选中第 1 个。
• Toggle({ type: ToggleType.Checkbox, isOn: this.selectedId === 1 }) 创建一个复选框，当选中的 ID 等于 1 时，这个框就显示为选中状态。
• .onChange(() => { this.selectedId = 1 }) 点击这个选项时，把 selectedId 设置为 1，这样其他选项就会自动变成未选中状态。
• Text("当前选中：选项" + this.selectedId) 根据 selectedId 的值，显示当前选中的选项。

7、选项卡

选项卡 用来实现像 “首页 / 分类 / 我的” 这种切换页面的效果，点击标签就能切换不同内容。

• Tabs() 用来包裹所有标签和内容。
• TabContent() 每个标签对应的内容区域，放这个标签页要显示的东西。
• .tabBar("首页") 点击这个文字就能切换