当前位置： 首页 > news >正文

鸿蒙NEXT开发指南：Image、Video与Swiper组件全面解析

news 2025/9/2 8:32:44

探索HarmonyOS NEXT的强大UI组件，打造精美多媒体应用

HarmonyOS NEXT作为华为自主研发的操作系统，为开发者提供了一套丰富而强大的UI组件库。本文将详细介绍四种常用多媒体组件的使用方法：Image图片显示、Video视频播放、Swiper轮播图和ArcSwiper弧形轮播图，帮助您快速提升应用开发效率。

1. 显示图片（Image组件）

Image组件是HarmonyOS中用于显示图片的核心组件，支持多种图片格式和源类型。

基本用法

typescript

Image('images/panda.jpg').width(100).height(100)

支持的数据源类型

Image组件支持多种数据源：17

  • 本地资源：存放在ets文件夹下的资源

typescript

Image('images/view.jpg').width(200)

  • Resource资源：通过$r资源接口读取

typescript

Image($r('app.media.icon'))

  • 网络资源：需要申请网络权限

typescript

Image('https://www.example.com/example.JPG')

  • 媒体库资源：通过file://前缀访问

typescript

Image('file://media/Photos/5').width(200)

  • Base64资源：直接使用base64编码数据

typescript

Image('data:image/png;base64,...')

  • PixelMap：图片解码后的像素图

typescript

@State image: PixelMap | undefined = undefined
// ...处理后
Image(this.image).width(100).height(100)

常用属性配置

Image组件提供了一系列属性用于控制图片显示效果：1

typescript

Image($r('app.media.cat')).width(100).height(200).objectFit(ImageFit.Fill) // 设置缩放类型.fillColor(Color.Blue)    // 设置SVG图片的绘制颜色

objectFit 支持多种枚举值：1

属性值说明
ImageFit.Contain保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
ImageFit.Cover保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界
ImageFit.Auto自适应显示
ImageFit.Fill不保持宽高比进行放大缩小，使得图片充满显示边界
ImageFit.ScaleDown保持宽高比显示，图片缩小或者保持不变
ImageFit.None保持原有尺寸显示

网络图片权限申请

使用网络图片需要在module.json5文件中声明权限：1

json

{"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET"}]}
}

2. 视频播放（Video组件）

Video组件用于在应用中播放视频内容，支持多种视频源和控制方式。

创建Video组件

Video组件通过调用接口创建：58

typescript

Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller
})

加载视频资源

Video组件支持多种视频源：5

  • 本地视频资源：

typescript

private innerResource: Resource = $rawfile('videoTest.mp4')

  • 网络视频资源：

typescript

private videoUrl = 'https://example.com/video.mp4'

  • Data Ability提供的路径：

typescript

private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'

  • 沙箱路径视频：

typescript

private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'

视频格式支持

Video组件支持的视频格式包括：mp4、mkv、webm、TS8。

完整示例代码

typescript

import router from '@ohos.router';@Entry
@Component
struct VideoPage {private TAG: string = 'VideoPage'private netVideoController: VideoController = new VideoController()private videoUrl: string = 'https://example.com/video.mp4'@State currentTime: number = 0@State durationTime: number = 0build() {Column() {Video({src: this.videoUrl,controller: this.netVideoController}).muted(false) // 设置是否静音.controls(true) // 设置是否显示默认控制条.autoPlay(false) // 设置是否自动播放.loop(false) // 设置是否循环播放.objectFit(ImageFit.Contain) // 设置视频适配模式.width('90%').height(200).onPrepared((event) => { // 准备完成回调if (event) {this.durationTime = event.duration}}).onUpdate((event) => { // 播放进度更新回调if (event) {this.currentTime = event.time}}).onFinish(() => { // 播放完成回调console.info(`${this.TAG}  onFinish `)}).onError(() => { // 播放错误回调console.info(`${this.TAG}  onError `)})// 自定义进度条Row() {Text(`${this.currentTime}s`)Slider({value: this.currentTime,min: 0,max: this.durationTime}).onChange((value: number, mode: SliderChangeMode) => {this.netVideoController.setCurrentTime(value)}).width("80%")Text(`${this.durationTime}s`)}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).opacity(0.8).width("90%")Button('开始播放').onClick(() => {this.netVideoController.start()}).width('80%')}}
}

权限申请

视频播放需要申请相应权限，在module.json5文件中添加：8

json

{"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET","usedScene": { "when": "always" }},{"name": "ohos.permission.MODIFY_AUDIO_SETTINGS","usedScene": { "when": "always" }},{"name": "ohos.permission.READ_MEDIA","usedScene": { "when": "always" }}]}
}

3. 创建轮播（Swiper组件）

Swiper组件提供子组件滑动轮播显示的能力，常用于创建图片轮播、横幅广告等效果。

基本用法

typescript

// 创建控制器
private swiperController: SwiperController = new SwiperController()// 初始化轮播数据
private bannerArray: Array<Resource> = [$r("app.media.banner_1"),$r("app.media.banner_2"),$r("app.media.banner_3")
]build() {Swiper(this.swiperController) {ForEach(this.bannerArray, (item: Resource) => {Image(item).width('100%').height(150).objectFit(ImageFit.Cover)}, (item: Resource) => JSON.stringify(item))}.vertical(false) // 是否垂直方向.index(0) // 默认显示第几个组件.cachedCount(1) // 预加载子组件个数.autoPlay(true) // 是否自动轮播.loop(true) // 是否循环轮播.interval(4000) // 轮播间隔，单位毫秒.duration(1000) // 轮播时长，单位毫秒.indicator(true) // 是否显示指示器
}

SwiperController控制器

SwiperController提供了一些控制方法：9

  • showNext(): 翻到下一页

  • showPrevious(): 翻到上一页

  • changeIndex(): 翻到指定位置的页面

自定义指示器

可以使用自定义指示器替代默认指示器：6

typescript

@State currentIndex: number = 0build() {Column() {Swiper(this.swiperController) {// ...轮播内容}.indicator(false) // 关闭默认指示器.onChange((index: number) => {this.currentIndex = index // 监听页面变化})// 自定义指示器Row({ space: 5 }) {ForEach(this.bannerArray, (item: Resource, index: number) => {Stack({ alignContent: Alignment.Start }) {Row().zIndex(1).width(this.currentIndex >= index ? '100%' : '0').height(2).borderRadius(2).backgroundColor(Color.Blue)}.width('100%').height(2).borderRadius(2).backgroundColor(this.currentIndex >= index ? Color.Blue : Color.Grey).layoutWeight(1)}, (item: Resource) => JSON.stringify(item))}.width('50%').height(50)}
}

LazyForEach懒加载

对于大量数据的轮播，建议使用LazyForEach进行懒加载：6

typescript

// 实现IDataSource接口
export class LazyData<T> implements IDataSource {private listeners: DataChangeListener[] = []private array: Array<T> = []totalCount(): number {return this.array.length}getData(index: number): T {return this.array[index]}registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {this.listeners.push(listener)}}unregisterDataChangeListener(listener: DataChangeListener): void {const index = this.listeners.indexOf(listener)if (index >= 0) {this.listeners.splice(index, 1)}}push(data: T) {this.array.push(data)}
}// 使用LazyForEach
@State data: LazyData<PhotoData> = new LazyData()Swiper(this.swiperController) {LazyForEach(this.data, (item: PhotoData, index: number) => {Image($r(`app.media.` + item.id)).width('100%').height('30%')}, (item: PhotoData) => JSON.stringify(item))
}

4. 创建弧形轮播（ArcSwiper组件）

ArcSwiper是弧形滑块视图容器，提供子组件滑动轮播显示的能力，适用于圆形或弧形显示设备的特殊需求。

基本用法

typescript

import { ArcSwiper, ArcSwiperAttribute, ArcDotIndicator, ArcDirection, ArcSwiperController 
} from '@kit.ArkUI';// 创建控制器
private arcSwiperController: ArcSwiperController = new ArcSwiperController()build() {ArcSwiper(this.arcSwiperController) {// 子组件内容ForEach(this.bannerArray, (item: Resource) => {Image(item).width(100).height(100)})}.index(0) // 当前显示的子组件索引值.indicator(true) // 启用弧形圆点指示器.duration(400) // 子组件切换的动画时长.vertical(false) // 是否为纵向滑动.disableSwipe(false) // 是否禁用滑动切换功能.effectMode(EdgeEffect.Spring) // 边缘滑动效果
}

ArcSwiperController控制器

ArcSwiperController提供弧形轮播的控制方法：4

typescript

// 翻至下一页，带动效切换过程
this.arcSwiperController.showNext()// 翻至上一页，带动效切换过程
this.arcSwiperController.showPrevious()// 停止播放动画
this.arcSwiperController.finishAnimation(() => {// 动画结束回调
})

指示器定制

可以定制弧形圆点指示器的样式：4

typescript

ArcSwiper(this.arcSwiperController) {// ...子组件
}
.indicator(new ArcDotIndicator().color(Color.Gray) // 默认颜色.selectedColor(Color.Blue) // 选中颜色.size(6) // 指示器大小.selectedSize(8) // 选中指示器大小
)

高级属性配置

ArcSwiper还提供了一些高级配置属性：4

typescript

ArcSwiper(this.arcSwiperController) {// ...子组件
}
.digitalCrownSensitivity(CrownSensitivity.MEDIUM) // 设置旋转表冠的灵敏度
.disableTransitionAnimation(false) // 是否关闭特殊动效效果

总结

HarmonyOS NEXT提供了丰富多样的多媒体组件，使开发者能够轻松创建出功能强大、视觉效果出色的应用：

  1. Image组件支持多种图片格式和数据源，满足各种场景下的图片显示需求。

  2. Video组件提供了完善的视频播放能力，支持本地和网络视频源，并具备完善的播放控制功能。

  3. Swiper组件可以创建平滑的轮播效果，支持自动播放、循环播放等特性，适合图片展示和横幅广告。

  4. ArcSwiper组件专为弧形屏幕设备设计，提供独特的弧形轮播体验，扩展了应用的表现形式。

通过灵活运用这些组件，开发者可以为用户创造更加丰富、生动的视觉体验，提升应用的整体质量和吸引力。

http://www.dtcms.com/a/361594.html

相关文章：

  • Mac idea 格式化代码快捷键
  • 用滑动窗口与线性回归将音频信号转换为“Token”序列：一种简单的音频特征编码方法
  • 若依vue自定义发布环境部署后所有菜单无法点击
  • Kubernetes一网络组件概述
  • 如何正确使用ChatGPT做数学建模比赛——数学建模AI使用技巧
  • Sqlsugar补充自定义模板
  • 环境搭建汇总
  • 在.NET标准库中进行数据验证的方法
  • 【qwen3vsglm4.5】JavaScript 与浏览器事件分类
  • 垃圾渗滤液中镍超标怎么处理
  • 亮数据MCP——专为信息爆炸时代打造的AI新闻利器。
  • 如何选择最佳车载交换机？车载交换机功能讲解
  • UCIE Specification详解（十二）
  • 【小白入】显示器核心参数对比度简介
  • Trae + MCP : 一键生成专业封面
  • （论文速读）3DTopia-XL：高质量3D资产生成技术
  • C语言：树的实现和剖析
  • 火狐退出中国后，Zen 浏览器会是「理想平替」吗？
  • MATLAB实现图像分割：Otsu阈值法
  • 辅助日志/备份文件自动化命名方案
  • 展会回顾 | 聚焦医疗前沿 ， 礼达先导在广州医博会展示类器官自动化培养技术
  • 解析简历重难点与面试回答要点
  • Redis基础教程
  • 构建线上门户的核心三要素：域名、DNS与IP 全面解析
  • 移动开发如何给不同手机屏幕做适配
  • RK3588部署yolov8目标检测
  • Rust序列化与反序列化-Serde 开发指南：从入门到实战
  • php + docker + idea debug
  • Elasticsearch面试精讲 Day 4：集群发现与节点角色
  • Ubuntu 22.04 装机黑屏(Nvidia显卡) 安装