以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序

发布于 1周前 作者 h691938207 来自 鸿蒙OS

以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序 中秋、国庆双节将至,作为程序员,以代码之名,表达对于阖家团圆的祝福。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Image、Swiper等组件来实现节日祝福轮播程序。

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

活动主页

https://mp.weixin.qq.com/s/9EDTkXbL-1_9ymv-HXd1IQ

规则要求具体要求如下:

  1. 根据主题,用ArkTS语言编写代码实现。
  2. 将ArkTS工程打包文件、最终的效果gif图和VOD相关文件,一起打包(大小18M以内)发送至:harmonyos@huawei.com

注:

  • 开发过程中遇到问题,请描述完整,可以按照下方VOD贡献奖规则,将所有信息打包上传。
  • 为了方便核验作品,保证作品的独特性,请将作品名称命名为:英文或者拼音+发布时间(例:bestwish202309281523)。

创建应用

选择空模板。

创建名为ArkUIMidAutumnFestival的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)
  }
}

其中,在media目录下放置相应的图片资源。

效果演示

cke_2455.gif

源码

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

学习更多HarmonyOS

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

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


更多关于以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问这个vod文件是什么啊

更多关于以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


问题单的意思,

  • 创建时间: 2023-01-01

  • 状态: 已解决

  • 优先级: 高

  • 分配给: 张三

  • 描述:

    • 第一步: 打开应用程序。
    • 第二步: 点击开始按钮。
    • 第三步: 选择设置选项。
  • 备注:

    • 注意事项一
    • 注意事项二

该程序使用ArkTS编写,展示了一个简单的祝福页面,用户点击按钮后会显示“祝福已发送”的提示。

// pages/Index.ets
import { promptAction } from '@ohos/promptAction';
import { hilog } from '@ohos/hilog';

@Entry
@Component
struct Index {
  @State message: string = '中秋国庆双节快乐,阖家团圆!';

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
        .margin({ top: 200 })
      Button('发送祝福')
        .onClick(() => {
          promptAction.showToast({
            message: '祝福已发送!',
            duration: 2000
          });
          hilog.info(0x0000, 'testTag', '祝福已发送!');
        })
        .margin({ top: 50 })
    }
    .width('100%')
    .height('100%')
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!