【资料包】HDC.Together 2023精选Codelabs指南现已上线（内有活动）

今年HDC.Together 2023的Codelabs挑战系列活动如期而至，众多开发者齐聚一堂，积极参与。本次赛题中部分Codelabs已在官网上线详细操作指南，让我们与众多coders一起探索代码的独特魅力。

01

ArkTS基础知识（ArkTS）

本课程使用声明式语法和组件化基础知识，搭建一个可刷新的排行榜页面。在排行榜页面中，使用循环渲染控制语法来实现列表数据渲染，使用@Builder创建排行列表布局内容，使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键，来学习自定义组件生命周期函数。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Ranking-Demo​​

02

转场动画的使用（ArkTS）

在本教程中，我们将会通过一个简单的样例，学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间转场、组件内转场以及共享元素转场。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_TransitionAnimation​​

03

Swiper的使用（ArkTS）

本篇Codelab主要介绍了滑动容器组件Swiper的几种常见的应用场景，包括顶部导航、轮播图以及视频滑动播放。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_tutorials_HarmonyOS-SwiperArkTS​​

04

构建多种样式弹窗（ArkTS）

本篇Codelab将介绍如何使用弹窗功能，实现四种类型弹窗。分别是：警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultipleDialog​​

05

二级联动（ArkTS）

本篇Codelab主要介绍如何基于List组件实现一个导航和内容的二级联动效果。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_SecondLevelLinkage​​

06

弹性布局（ArkTS）

本篇Codelab主要介绍如何基于Flex容器组件特性，实现弹性布局效果。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_FlexLayout​​

07

闹钟（ArkTS）

本篇Codelab主要介绍如何基于ArkTS的声明式开发范式及HarmonyOS的后台代理提醒能力，实现简单的闹钟提醒功能。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_AlarmClock​​

08

图片编辑（ArkTS）

本篇Codelab主要介绍如何基于图片编解码，实现图片编辑，包含裁剪、旋转、色域调节（本文只介绍亮度、透明度、饱和度）等功能。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_ImageEdit​​

09

视频播放器（ArkTS）

本篇Codelab基于HarmonyOS的播放管理类（AVPlayer），使用ArkTS语言实现视频播放器，主要包括视频获取和视频播放功能。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Video-Player​​

10

电子相册（ArkTS）

本篇Codelab介绍了基于ArkTS实现一个电子相册的案例，通过捏合和拖拽手势控制图片的放大、缩小、左右拖动查看细节等效果。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_ElectronicAlbum​​

11

一次开发，多端部署-音乐专辑（ArkTS）

本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署音乐专辑。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案，通过合理的工程结构组织代码，以及解决系统能力差异的兼容性问题。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultiDeviceMusic​​

12

一次开发，多端部署-购物应用（ArkTS）

本篇Codelab基于自适应布局和响应式布局，实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码，实现一次开发，多端部署。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_MultiShopping​​

13

健康生活卡片（ArkTS）

本篇Codelab基于健康生活应用实现ArkTS卡片，介绍卡片的开发及生命周期。实现2x2和2x4规格的卡片功能，并通过关系型数据库完成创建、查询、添加、删除卡片数据。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_HealthyLifeArkTSCard​​

14

溪村小镇

溪村小镇是一款展示溪流背坡村园区风貌的应用，包括园区内的导航功能，小火车行车状态查看，以及各区域的风景展览介绍，主要用于展示HarmonyOS的ArkUI能力和动画效果。

操作指南：​​https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_OxHornCampus​​

除了丰富的Codelabs供开发者学习，为了帮助大家更好地了解本次HDC大会期间发布的最新开发资料，论坛更是为大家准备了鸿蒙生态资料锦集，带您快速了解鸿蒙生态，轻松开启HarmonyOS应用开发旅程，实现共建、共享、共赢。

​

2023 HDC.Together | 鸿蒙生态资料锦集：

​​https://developer.huawei.com/consumer/cn/forum/topic/0211126551683576003?fid=23​​