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

「爱情、让人受尽委屈。」 2024-03-24 22:41 65阅读 0赞

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

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

## 活动主页 ##

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

规则要求具体要求如下：

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

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

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

## 创建应用 ##

选择空模板。

![cke\_144.png][cke_144.png]

创建名为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][]

完整视频演示见：[【老卫搬砖】040期：基于HarmonyOS ArkUI实现七夕壁纸轮播\_哔哩哔哩\_bilibili][040_HarmonyOS ArkUI_bilibili]

## 源码 ##

见：[https://github.com/waylau/harmonyos-tutorial][https_github.com_waylau_harmonyos-tutorial]

## 学习更多HarmonyOS ##

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

可以从HaromnyOS 官网（[华为HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态][HarmonyOS_ _]）了解到最新的HaromnyOS咨询以及开发指导。除此之外，笔者也整理了以下学习资料。

*  华为开发者联盟：[华为开发者论坛][Link 1]
 *  《跟老卫学HarmonyOS开发》 开源免费教程：[https://github.com/waylau/harmonyos-tutorial][https_github.com_waylau_harmonyos-tutorial]
 *  《鸿蒙HarmonyOS手机应用开发实战》（清华大学出版社）
 *  《鸿蒙HarmonyOS应用开发从入门到精通战》（北京大学出版社），
 *  “鸿蒙系统实战短视频App 从0到1掌握HarmonyOS” ：[鸿蒙系统实战短视频App 从0到1掌握HarmonyOS\_实战课程\_慕课网][App _0_1_HarmonyOS]

[_ _Ta]: https://mp.weixin.qq.com/s/sX8612JmPiPVwPMnqrBC-w
[cke_144.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/27ad0dd9d9b9404b8a7e9ef1b1d458b5.png
[love.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/16feca48ad4f45df8d1a3f70344e1c61.png
[040_HarmonyOS ArkUI_bilibili]: https://www.bilibili.com/video/BV1qh4y1T7dU/
[https_github.com_waylau_harmonyos-tutorial]: https://github.com/waylau/harmonyos-tutorial
[HarmonyOS_ _]: https://www.harmonyos.com/
[Link 1]: https://developer.huawei.com/consumer/cn/forum/communityHome
[App _0_1_HarmonyOS]: https://coding.imooc.com/class/674.html