为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

规则要求具体要求如下:

① 根据主题,用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)
  }
}复制


效果演示


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

源码

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

学习更多HarmonyOS

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

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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
1.7万
获赞与收藏
2171

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消