使用ArkUI开发一个图片滑动播放功能HarmonyOS鸿蒙Next应用

使用ArkUI开发一个图片滑动播放功能HarmonyOS鸿蒙Next应用 方舟开发框架（ArkUI）是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI。

方舟开发框架提供两种开发范式：基于JS扩展的类Web开发范式、基于TS扩展的声明式开发范式。

本节主要介绍基于TS扩展的声明式开发范式的入门使用。通过基于TS扩展的声明式开发范式，我们将开发一个简单的HarmonyOS应用——使用Swiper实现图片滑动播放功能。

活动主页

#HarmonyOS挑战赛第四期#

秀出你的超级“码”力：使用方舟开发框架（ArkUI）构建HarmonyOS应用

https://developer.huawei.com/consumer/cn/forum/topic/0201702169762350045?fid=0101587866109860105&pid=0303704147721010290

什么是基于TS扩展的声明式开发范式

基于TS扩展的声明式开发范式的方舟开发框架是为HarmonyOS平台开发极简、高性能、跨设备应用设计研发的UI开发框架，支持开发者高效的构建跨设备应用UI界面。

使用基于TS扩展的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。从组件、动效和状态管理三个维度来提供UI能力，还提供了系统能力接口，实现系统能力的极简调用。

创建应用

这里需要注意的是，如果想要体验基于TS扩展的声明式开发范式，需要安装DevEco Studio 3。

创建一个名为“EtsUISwiper”的应用。这里我们选用的是一个空模板。

最为重要的是语言（Language）要选择“eTS”。

对应用进行预览

可以对应用进行预览。如果没有Previewer按钮，点击settings > SDK Manager > HarmonyOS Legacy SDK> Tools 查看是否安装了Previewer。

并启用预览器

对应用进行预览效果如下：

应用探索

整体应用结构如下。其中，Index.ets是整个程序的核心入口。

增加图片模型

ImageData代表图片数据模型，主要有三个属性。

export class ImageData {
  id: string
  img: Resource
  name: string
  constructor(id: string, img: Resource, name: string) {
    this.id = id // 图片唯一表示
    this.img = img // 图片资源
    this.name = name // 图片名称
  }
}

增加图片数据源

initializeImageData方法用于初始化图片的数据源代码如下：

export function initializeImageData(): Array<ImageData> {
  let imageDataArray: Array<ImageData> = [
    {
      "id": "0",
      "img": $r('app.media.pic01'),
      "name": '1024程序员节'
    },
    {
      "id": "1",
      "img": $r('app.media.pic02'),
      "name": '程序员日常'
    },
    {
      "id": "2",
      "img": $r('app.media.pic03'),
      "name": 'HDC2021'
    },
  ]
  return imageDataArray
}

可以看到上面定义了一个数组，里面有三张图片的信息。其中“$rd”符号用于应用media目录下的图片资源。

增加Swiper组件

最后是需要在index.etx的Flex

容器中添加并使用Swiper组件，代码如下：

@Entry
@Componentstruct Index {
  private imageSrc: ImageData[] = initializeImageData()
  build() {
    Flex({
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center
    }) {
      Swiper() {
        ForEach(this.imageSrc, item => {
          Image(item.img)
        }, item => item.name)
      }
    }
  }
}

上述代码，

• Swiper定义了一个Swiper组件。
• ForEach用于遍历initializeImageData方法所初始化的图片数据资源。
• 图片资源赋值给Swiper组件的imageSrc属性。

运行

应用运行效果如下。

滑动1

滑动2

滑动3

源码

上述示例源码，可以在https://github.com/waylau/harmonyos-tutorial仓库找到。