基于HarmonyOS ArkUI实现七夕壁纸轮播

七夕情人节，为了Ta，你打算用什么方式表达爱？是包包、鲜花、美酒、巧克力，还是一封充满爱意的短信？作为程序员，以代码之名，表达爱。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Image、Swiper等组件来实现七夕壁纸轮播。

本文涉及的所有源码，均可以在文末链接中找到。

活动主页

【活动驿站】有奖活动 | 以代码之名，写出对Ta的爱

规则要求具体要求如下：

① 根据主题，用ArkTS语言编写代码，运行代码。

② 将代码文件和最终的效果gif图打包（大小15M以内）发送至：harmonyos@huawei.com

注：为了方便核验作品，保证作品的独特性，请将作品名称命名为：英文或者拼音+发布时间（例：bestlove202308211523）。

创建应用

选择空模板。

创建名为ArkUIExpressingLove的HarmonyOS应用。

核心代码讲解

主页Index.ets 主要是使用了SwiperController、Image、Swiper来实现图片联播。

代码如下：

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()


  build() {
    Column() {
      Swiper(this.swiperController) {
        Image($r('app.media.001'))

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

        Image($r('app.media.003'))
      }
      .index(0)
      .autoPlay(true) // 自动播放
      .indicator(true) // 默认开启指示点
      .loop(true) // 默认开启循环播放
      .duration(50)
      .vertical(true) // 默认横向切换
      .itemSpace(0)
    }.height('100%').width('100%').backgroundColor(0x3d3d3d)
  }
}复制