随着鸿蒙操作系统（HarmonyOS）生态的持续完善，ArkUI 作为其原生应用开发框架，肯定是我们鸿蒙开发者必选之一。在移动应用场景中，媒体展示覆盖了从商品详情页的图片展示、短视频平台的视频播放，到 APP 首页的轮播图推广等各种应用场景。图片、视频与轮播图的实现效果，带给用户的是最直观的交互体验。​今天卤煮分享ArkUI框架的媒体展示的上手教程。

一、 ArkUI媒体展示概述

鸿蒙开发官网为我们提供了的媒体展示包含以下几种场景，在我们自己的应用场景，最基础的图片也属于媒体展示的领域。像视频和轮播图等应用场景几乎也是移动应用开发当中不可或缺的元素。

• 显示图片 (Image)
• 视频播放 (Video)
• 创建轮播 (Swiper)
• 创建弧形轮播 (ArcSwiper)（圆形屏幕推荐使用）

今天卤煮分享图片和轮播的实操手册

二、项目实战

1、图片展示

在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg、gif和heif，不支持apng和svga格式，具体用法请参考Image组件。

这里卤煮用页面实战一下图片资源的展示，画一个我们开发过程中常遇到的场景，就是列表查询页查无数据的场景。

• 代码实现：

@Entry
@Component
struct NoDataPage {
  build() {
    Column() {
      // 图片区域（使用本地资源）
      Image($r('app.media.empty')) // 加载resources/base/media目录下的empty.png
        .width(160)
        .height(160)
        .objectFit(ImageFit.Contain)
        .margin({ bottom: 20 })

      // 文字区域
      Text('-暂无数据-')
        .fontSize(16)
        .fontColor('#666')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

• 页面效果：

图片的展示很轻松就上手了，直接应用Image组件就可以，将提前配置到项目中的图片参数传到组件中就可以了，然后就是基础的给图片设置宽高等属性。

2、轮播图展示

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

官方实例给我们详解了一波，已经相当详细，可看这里。卤煮本地资源刚好很多表情包，直接轮播图展示一下。

• 代码实现：

@Entry
@Component
struct EmojiCarousel {
  private emojiList: Resource[] = [
    $r('app.media.iconEmo_bq0'),
    $r('app.media.iconEmo_bq1'),
    $r('app.media.iconEmo_bq2'),
    $r('app.media.iconEmo_bq3'),
    $r('app.media.iconEmo_bq4'),
    $r('app.media.iconEmo_bq5'),
    $r('app.media.iconEmo_bq6'),
    $r('app.media.iconEmo_bq7'),
    $r('app.media.iconEmo_bq8'),
  ]

  build() {
    Column() {
      // 轮播图容器
      Swiper() {
        ForEach(this.emojiList, (item: Resource) => {
          Image(item)
            .width('100%')
            .height('100%')
            .objectFit(ImageFit.Cover) // 图片自适应填充
        })
      }
      .height(250) // 容器高度
      .loop(true)  // 循环播放
      .autoPlay(true) // 自动播放
      .interval(2500) // 切换间隔
      .indicator(false) // 隐藏默认指示器
    }
    .width('100%')
  }
}

• 页面效果：

轮播图的进阶玩法还有很多，像Swiper与Tabs联动，感兴趣的可以学习一下！

三、实战体验

先说说 Image 组件 —— 核心就是 “把图正确显示，还得好看、不翻车”。首先是图片资源的配置，本地图要放在 media 文件夹里，调用的时候用 $r ('app.media.xxx')，别瞎写路径（我一开始漏了 “app.media”，图半天加载不出来。

再说说轮播图，核心是用 Swiper 组件搭架子，里面塞 Image 组件就行，没想象中复杂。首先要解决 “自动播 + 循环播”：加 autoplay:true 开自动播放，loop:true 开循环，再调 autoplayDelay 设播放间隔。总之轮播图的玩法还有很多，感兴趣的小伙伴可以一下官网实例-->戳这里。

四、结语

这次用鸿蒙的组件做，我发现其实不难 ——Image 组件的适配、轮播图的自动播和指示器，跟着官方文档走，一会就能搭好。官方文档里全是干货，还给现成的代码片段，不用自己瞎琢磨 “这个属性怎么用”“那个参数填多少”。之前用别的框架做轮播图，还得自己写循环逻辑、处理指示器状态，鸿蒙直接把这些封装好，调用几个属性就搞定，省了好多时间。

最后不管你做的是电商 APP、资讯软件，还是工具类应用，图片展示和轮播图这俩功能，基本就是 “标配”。少了它们，APP 看着就没灵气，用户也不爱用。鸿蒙生态的势头正猛，一起加入到鸿蒙开发的大家族吧，期待志同道合的小伙伴加入鸿蒙知识共建交流群！！！！！