基于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)
  }
}复制

效果演示

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

源码

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

学习更多HarmonyOS

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

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

相关推荐
2501_9197490324 分钟前
华为鸿蒙免费听歌APP+免费铃声APP
华为·harmonyos
tsqtsqtsq03091 小时前
ArkTS 泛型概念详解
华为·harmonyos·鸿蒙系统
程序员黑豆2 小时前
鸿蒙应用开发教程:以红绿灯切换为例,掌握条件渲染的核心用法
前端·harmonyos
Catrice02 小时前
HarmonyOS ArkTS 实战:实现一个校园证件照拍摄与预约应用
华为·harmonyos
qizayaoshuap3 小时前
# [特殊字符] 手电筒 — 鸿蒙ArkTS设备功能调用与UI交互设计
ui·华为·交互·harmonyos
JaneConan3 小时前
鸿蒙报错速查:arkts-no-any any 类型禁用,用了就炸,根因 + 真解法
后端·harmonyos
listening7773 小时前
HarmonyOS 6.1 UX动效实战:从“生硬”到“灵动”的物理动画引擎
华为·harmonyos·ux
2301_768103494 小时前
HarmonyOS趣味相机实战第29篇:AudioRenderer合成快门声、并发门闩与资源释放
harmonyos·arkts·资源管理·音频开发·audiorenderer
listening7775 小时前
HarmonyOS 6.1 混沌工程实战:从“故障免疫”到“韧性架构”
华为·架构·harmonyos
特立独行的猫a5 小时前
Python三方库鸿蒙PC移植指南PPT
harmonyos·移植·鸿蒙pc·python三方库