今年HDC.Together 2023的Codelabs挑戰(zhàn)系列活動如期而至，眾多開發(fā)者齊聚一堂，積極參與。本次賽題中部分Codelabs已在官網(wǎng)上線詳細操作指南，讓我們與眾多coders一起探索代碼的獨特魅力。

01

ArkTS基礎知識（ArkTS）

本課程使用聲明式語法和組件化基礎知識，搭建一個可刷新的排行榜頁面。在排行榜頁面中，使用循環(huán)渲染控制語法來實現(xiàn)列表數(shù)據(jù)渲染，使用@Builder創(chuàng)建排行列表布局內容，使用裝飾器@State、@Prop、@Link來管理組件狀態(tài)。最后我們點擊系統(tǒng)返回按鍵，來學習自定義組件生命周期函數(shù)。

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

02

轉場動畫的使用（ArkTS）

在本教程中，我們將會通過一個簡單的樣例，學習如何基于ArkTS的聲明式開發(fā)范式開發(fā)轉場動畫。其中包含頁面間轉場、組件內轉場以及共享元素轉場。

操作指南：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將介紹如何使用彈窗功能，實現(xiàn)四種類型彈窗。分別是：警告彈窗、自定義彈窗、日期滑動選擇器彈窗、文本滑動選擇器彈窗。

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

05

二級聯(lián)動（ArkTS）

本篇Codelab主要介紹如何基于List組件實現(xiàn)一個導航和內容的二級聯(lián)動效果。

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

06

彈性布局（ArkTS）

本篇Codelab主要介紹如何基于Flex容器組件特性，實現(xiàn)彈性布局效果。

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

07

鬧鐘（ArkTS）

本篇Codelab主要介紹如何基于ArkTS的聲明式開發(fā)范式及HarmonyOS的后臺代理提醒能力，實現(xiàn)簡單的鬧鐘提醒功能。

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

08

圖片編輯（ArkTS）

本篇Codelab主要介紹如何基于圖片編解碼，實現(xiàn)圖片編輯，包含裁剪、旋轉、色域調節(jié)（本文只介紹亮度、透明度、飽和度）等功能。

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

09

視頻播放器（ArkTS）

本篇Codelab基于HarmonyOS的播放管理類（AVPlayer），使用ArkTS語言實現(xiàn)視頻播放器，主要包括視頻獲取和視頻播放功能。

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

10

電子相冊（ArkTS）

本篇Codelab介紹了基于ArkTS實現(xiàn)一個電子相冊的案例，通過捏合和拖拽手勢控制圖片的放大、縮小、左右拖動查看細節(jié)等效果。

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

11

一次開發(fā)，多端部署-音樂專輯（ArkTS）

本篇Codelab基于自適應布局和響應式布局，實現(xiàn)一次開發(fā)，多端部署音樂專輯。介紹手機、折疊屏、平板等不同屏幕尺寸設備的頁面設計和實現(xiàn)方案，通過合理的工程結構組織代碼，以及解決系統(tǒng)能力差異的兼容性問題。

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

12

一次開發(fā)，多端部署-購物應用（ArkTS）

本篇Codelab基于自適應布局和響應式布局，實現(xiàn)購物應用在手機、折疊屏、平板不同屏幕尺寸設備上按不同設計顯示。通過三層工程結構組織代碼，實現(xiàn)一次開發(fā)，多端部署。

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

13

健康生活卡片（ArkTS）

本篇Codelab基于健康生活應用實現(xiàn)ArkTS卡片，介紹卡片的開發(fā)及生命周期。實現(xiàn)2x2和2x4規(guī)格的卡片功能，并通過關系型數(shù)據(jù)庫完成創(chuàng)建、查詢、添加、刪除卡片數(shù)據(jù)。

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

14

溪村小鎮(zhèn)

溪村小鎮(zhèn)是一款展示溪流背坡村園區(qū)風貌的應用，包括園區(qū)內的導航功能，小火車行車狀態(tài)查看，以及各區(qū)域的風景展覽介紹，主要用于展示HarmonyOS的ArkUI能力和動畫效果。

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

除了豐富的Codelabs供開發(fā)者學習，為了幫助大家更好地了解本次HDC大會期間發(fā)布的最新開發(fā)資料，論壇更是為大家準備了鴻蒙生態(tài)資料錦集，帶您快速了解鴻蒙生態(tài)，輕松開啟HarmonyOS應用開發(fā)旅程，實現(xiàn)共建、共享、共贏。

2023 HDC.Together | 鴻蒙生態(tài)資料錦集：https://developer.huawei.com/consumer/cn/forum/topic/0211126551683576003?fid=23

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