一.显示图片 (Image)

1. 基础定义

Image是ArkTS专门用于展示图片的基础组件，只要你需要在鸿蒙应用界面显示图片，都需要用它实现。

2. 核心使用步骤

1. 导入图片资源：把你的图片文件放入项目的entry/src/main/resources/base/media目录，ArkTS会自动识别该目录下的所有图片。

2. 声明图片组件：通过固定格式引入图片：Image($r('app.media.你的图片文件名'))，不需要写图片后缀，ArkTS会自动匹配。

还可以将图片放在rawfile文件夹下。

// $rawfile('example1.png')需要替换为开发者所需的资源文件
Image($rawfile('example1.png'))

3.场景示例

第一张图片配置  

• 引用路径：图片存放在工程资源目录resources/base/media下，通过$r('app.media.111')正确引入111.webp图片

• 样式：设置宽度铺满页面、高度固定200px；加了10px圆角让边角更柔和；设置objectFit(ImageFit.Cover)保证图片按原比例填充容器，超出部分自动裁剪，避免图片变形。

 第二张图片配置  

• 引用路径：引入同目录下名为222的第二张图片

• 样式：设置固定宽高200×120px、同样加10px圆角；额外配置了阴影效果：阴影半径30px，红色阴影，向右向下各偏移2px，让图片呈现悬浮效果，这里注释掉了objectFit，使用默认适配规则也满足需求。

这里写了一个简单的页面 text文本输入 设置字号加粗 然后水平布局 就是把image和俩个一本放在一行 space设置组件间距 最后整体居中

二.视频播放 (Video)

1. 基础定义

Video是鸿蒙ArkTS声明式开发中用于播放视频文件的官方UI组件，从API7开始支持，仅能实现基础视频播放功能

2. 核心使用规则

• 权限要求：使用网络视频时，需要在module.json5中声明ohos.permission.INTERNET权限

• 不支持子组件：不能在Video内部嵌套其他组件

• 支持的视频格式：mp4、mkv、webm、TS

视频源路径：
1. 本地资源：$r('app.media.videoName')或src：$rawfile('videoName.mp4')

2. 网络资源：https://xxx.mp4
3. 沙箱路径：file:///data/storage/xxx.mp4

Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等

自定义控制器 ：使用自定义的控制器，先关闭默认控制器，然后使用Button以及Slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

3.场景示例

这是一个简单的列子要在index中来实现 用虚拟设备打开 可以随意暂停开启

用虚拟设备来实现

controller: VideoController：创建视频控制器，后续用来控制视频的播放、暂停等操作

用纵向容器Column排列所有内容，先添加标题：设置字号24，文字居中，宽度撑满整个页面。

参数部分：

1. src:$rawfile('bb.mp4')：视频源是放在工程rawfile目录下的本地视频bb.mp4

2. controller: this.controller：绑定我们之前创建的视频控制器，用来控制视频

3. previewUri: $r('app.media.background')：设置视频加载前的预览封面图

样式属性部分：

1. 宽高：宽度撑满页面、高度固定220像素

2. .controls(false)：关闭系统默认的原生播放控制栏，我们会自定义按钮控制

3. .autoPlay(true)：打开页面后自动开始播放视频

4. .loop(true)：开启循环播放，视频播完自动重播

5. .muted(false)：关闭静音，保留视频声音

6. .objectFit(ImageFit.Contain)：视频按原比例完整显示在容器内，不会裁剪也不会变形

这就是一个最简单的「在线网络视频播放器」页面

先准备工具controller和视频地址videoSrc
我们要放视频，得有个"遥控器"来控制它播放/暂停对吧？
第一行代码就是给我们这个页面提前准备好这个遥控器，这个遥控器就叫VideoController。
第二行就是把我们要放的在线网络视频地址存好，这里示例用的是一个公开的测试视频，实际用的时候换成你自己要放的网络视频链接就行。  

2.  告诉页面，把内容从上往下排
Column()就是鸿蒙里的"排队神器"，意思就是"我这里面放的所有东西，都从上到下挨个排好"，我们这里只放视频，所以直接把视频放进去就行。

 3.  把视频插进去，用刚才的遥控器控制它
最后放Video组件（这个就是鸿蒙自带的"播放器"零件），然后告诉它两件事：  

• 你要播放的就是我们刚才存好的那个网络视频地址src: this.videoSrc

• 控制你的遥控器就是我们一开始准备好的那个controller: this.controller

三.创建轮播 (Swiper)

1、先搞懂「轮播组件到底是什么」

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

简单说就是自动切换的图片/卡片滑动容器，比如电商首页的广告位、宿舍成员页的轮播合照，就是典型的轮播效

Swiper() 是鸿蒙自带的轮播容器，就像一个「相框框」，专门放轮播内容  Image($r('app.media.member1')) 是往相框里放第一张图片，$r是读取你项目里的本地图片

这些都是给轮播框加的「开关和样式」：

1. .indexed(true)：显示底部的小圆点指示器，告诉你现在在第几张

2. .autoPlay(true)：开启自动轮播，不用手动滑动

3. .interval(3000)：每3秒自动切换下一张

4. .duration(500)：切换图片的动画时长是0.5秒

5. .indicatorStyle({selectedColor: Color.Blue})：把当前选中的小圆点改成蓝色

2.场景示例

Tabs是可滑动切换的标签页容器，这里先添加了第一个标签页内容TabContent

• 标签页内部放了一个Swiper轮播组件，轮播项是5个对应校园地点的文本块，每个文本都占满轮播宽高，设置对应背景色、居中显示文字

• 轮播配置：宽高：宽度撑满容器，高度固定180px

 .indicator(true)开启轮播指示器，显示当前轮播位置

.autoPlay(true)开启自动轮播，每3000毫秒（3秒）切换一次

.loop(true)开启循环轮播，滑到最后一张后回到第一张 外层标签页Tabs设置宽度撑满页面

先引入$r工程resources目录下的两张本地图片作为轮播内容。

这就是核心的Swiper轮播组件：

1. 内容循环：通过ForEach遍历我们准备好的轮播图片数组，把每一项渲染为Image图片组件，并且设置填充方式为cover，让图片铺满轮播区域不变形

2. 样式配置：宽度撑满页面，高度固定180像素，整体加10像素内边距

3. 功能配置：

• .indicator(true)：开启轮播指示器（底部点状物，显示当前是第几张轮播）

• .autoPlay(true)：开启自动轮播  .interval(3000)：轮播间隔设置为3000毫秒（即3秒切换一次）

• .loop(true)：开启循环轮播，滑到最后一张后自动回到第一张