《HarmonyOS ArkTS 基础组件：图片/视频/轮播 核心知识点汇总》

一.显示图片 (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.mp43. 沙箱路径file:///data/storage/xxx.mp4Video控制器主要用于控制视频的状态包括播放、暂停、停止以及设置进度等自定义控制器 使用自定义的控制器先关闭默认控制器然后使用Button以及Slider等组件进行自定义的控制与显示适合自定义较强的场景下使用。3.场景示例这是一个简单的列子要在index中来实现 用虚拟设备打开 可以随意暂停开启用虚拟设备来实现controller: VideoController创建视频控制器后续用来控制视频的播放、暂停等操作用纵向容器Column排列所有内容先添加标题设置字号24文字居中宽度撑满整个页面。参数部分1. src:$rawfile(bb.mp4)视频源是放在工程rawfile目录下的本地视频bb.mp42. 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)开启循环轮播滑到最后一张后自动回到第一张