HarmonyOS 鸿蒙Next【以代码之名，表达爱】基于HarmonyOS ArkUI实现七夕壁纸轮播

HarmonyOS 鸿蒙Next【以代码之名，表达爱】基于HarmonyOS ArkUI实现七夕壁纸轮播 七夕情人节，为了Ta，你打算用什么方式表达爱？是包包、鲜花、美酒、巧克力，还是一封充满爱意的短信？作为程序员，以代码之名，表达爱。

本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Image、Swiper等组件来实现七夕壁纸轮播。

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

活动主页

https://mp.weixin.qq.com/s/sX8612JmPiPVwPMnqrBC-w

规则要求具体要求如下：

  • 根据主题，用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)
  }
}

效果演示

love.gif

完整视频演示见：https://www.bilibili.com/video/BV1qh4y1T7dU/

源码

见：https://github.com/waylau/harmonyos-tutorial

学习更多HarmonyOS

作为开发者，及时投入HarmonyOS 4的学习是非常必要的。鸿蒙生态经历了艰难的四年，但轻舟已过万重山，目前已经慢慢走上了正轨，再现繁荣指日可待。

可以从HaromnyOS 官网（https://www.harmonyos.com/）了解到最新的HaromnyOS咨询以及开发指导。除此之外，笔者也整理了以下学习资料。


更多关于HarmonyOS 鸿蒙Next【以代码之名，表达爱】基于HarmonyOS ArkUI实现七夕壁纸轮播的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next【以代码之名，表达爱】基于HarmonyOS ArkUI实现七夕壁纸轮播的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next 是基于分布式技术的全场景操作系统，支持多种设备类型，包括手机、平板、智能穿戴、智能家居等。ArkUI 是 HarmonyOS 提供的声明式 UI 开发框架，允许开发者通过简洁的代码实现复杂的 UI 效果。

在 HarmonyOS Next 中，使用 ArkUI 实现七夕壁纸轮播可以通过 Swiper 组件来实现。Swiper 是 ArkUI 中用于实现轮播效果的组件，支持自动轮播、手动滑动等功能。以下是一个简单的代码示例，展示如何使用 Swiper 组件实现七夕壁纸轮播：

@Entry
@Component
struct LoveWallpaper {
  private images: Resource[] = [
    $r('app.media.image1'),
    $r('app.media.image2'),
    $r('app.media.image3')
  ];

  build() {
    Swiper() {
      ForEach(this.images, (image: Resource) => {
        Image(image)
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Cover)
      })
    }
    .autoPlay(true)
    .interval(3000)
    .indicator(true)
  }
}

在这个示例中，Swiper 组件用于创建一个轮播容器，ForEach 用于遍历图片资源数组，Image 组件用于显示每张图片。autoPlay 属性设置为 true，表示自动轮播，interval 属性设置为 3000，表示每 3 秒切换一张图片，indicator 属性设置为 true，表示显示轮播指示器。

通过这种方式，开发者可以轻松实现一个基于 HarmonyOS ArkUI 的七夕壁纸轮播效果。

回到顶部