以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序
以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序 中秋、国庆双节将至,作为程序员,以代码之名,表达对于阖家团圆的祝福。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Image、Swiper等组件来实现节日祝福轮播程序。
本文涉及的所有源码,均可以在文末链接中找到。
活动主页
https://mp.weixin.qq.com/s/9EDTkXbL-1_9ymv-HXd1IQ
规则要求具体要求如下:
- 根据主题,用ArkTS语言编写代码实现。
- 将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目录下放置相应的图片资源。
效果演示
源码
见:https://github.com/waylau/harmonyos-tutorial
学习更多HarmonyOS
作为开发者,及时投入HarmonyOS 4的学习是非常必要的。鸿蒙生态经历了艰难的四年,但轻舟已过万重山,目前已经慢慢走上了正轨,再现繁荣指日可待。
可以从HaromnyOS 官网(https://www.harmonyos.com/)了解到最新的HaromnyOS咨询以及开发指导。除此之外,笔者也整理了以下学习资料。
- 华为开发者联盟:https://developer.huawei.com/consumer/cn/forum/communityHome
- 《跟老卫学HarmonyOS开发》 开源免费教程:https://github.com/waylau/harmonyos-tutorial
- 《鸿蒙HarmonyOS手机应用开发实战》(清华大学出版社)
- 《鸿蒙HarmonyOS应用开发从入门到精通战》(北京大学出版社)
- “鸿蒙系统实战短视频App 从0到1掌握HarmonyOS” :https://coding.imooc.com/class/674.html
更多关于以代码之名,写阖家团圆祝福demo 基于HarmonyOS 鸿蒙Next ArkTS中秋国庆祝福程序的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
请问这个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%')
}
}