今年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

【有獎活動】還希望今后的Codelabs活動增添哪些互動內容？歡迎到論壇參與討論并曬出你的認證考試證書。精彩好禮等你喲~點擊"閱讀原文"參與活動！