飞翔的十号鸿蒙开发学习 Day02，我给自己定的一个小目标是：用 ArkTS 写一个生肖卡抽奖页面。点击按钮，随机抽出一张生肖卡，卡面从背面翻到正面，显示生肖名字、祝福语和配图，顺手把抽卡历史记录下来。项目不大，但状态管理、组件布局、属性动画、随机逻辑这些日常开发里最常碰到的能力全都能过一遍，做完之后对整个 ArkUI 声明式开发会有个比较立体的认识。这篇文章是 Day02 的完整复盘，从需求拆解到代码实现再到调试踩坑，适合刚学完鸿蒙基础语法、想通过小项目巩固知识的同学。没有鸿蒙环境也没关系，思路是通用的，后面也会把每个环节的步骤写清楚。
开工之前先给个忠告：Day02 这个阶段，不要一上来就想着做多炫的 UI。小项目最怕的就是把时间耗在调样式上。我当时给自己定的规则是：功能先跑通，动画能看就行，样式后期再美化。事实证明这个决定很正确，到了 Day02 结束，核心功能全部实现，样式虽然朴素但完整可跑，比憋一个精美半成品要值太多。
1. 项目设计：动手之前先想清楚的三件事
1.1 核心需求拆解：展示、抽取、翻卡
任何项目，动手写代码之前先拆需求。生肖卡抽奖看似简单，拆开其实是三件事。
第一件是卡片展示。12 张生肖卡，鼠牛虎兔龙蛇马羊猴鸡狗猪，每张卡要有生肖名、主题色、配图和一句祝福语。这里涉及一个很实际的问题：图片资源放哪、怎么引用。我的选择是全部放本地 media 目录，用 $r('app.media.xxx') 引用，不走网络加载。好处很明显：开发调试阶段不需要处理网络权限、加载失败、缓存这些额外问题，项目逻辑更纯粹。如果你手头没有现成的 12 张图片，用一个纯色背景加大号生肖文字替代完全没有问题，重点是先把数据结构和渲染流程跑通。
第二件是随机抽取。每次点击抽奖按钮，从 12 张卡里公平地选出一张。这里面有两个地方值得认真设计：一是“公平”怎么实现，直接 Math.random() 取整是最简单的，但连续抽中同一张很影响体验；二是用户手速快，连续点按钮会不会出问题，这就要考虑防连点。
第三件是翻卡动画。这是整个项目视觉上最出彩的部分。卡片初始状态是背面朝上，点击抽奖后沿 Y 轴旋转 180 度，翻到正面展示结果。动画看起来不难，但实现上有个关键细节：如果只是简单地把卡片整体 rotate 180 度，正面文字会变成镜像，观感很怪。正确做法是分两段翻转：先转 90 度到卡片的“侧边”，此时切换正反面内容，再继续转 90 度让正面朝上。
这三个需求列清楚，项目边界就出来了。不是功能越多越好，而是把这三件事做到位，这个 Demo 的质量就超过很多只做静态展示的学习项目了。
1.2 技术选型：为什么从第一天就用 ArkTS + ArkUI + Stage 模型
现在鸿蒙应用开发的技术栈选择，主流就是 ArkTS + ArkUI + Stage 模型这套组合，而且这也是官方文档默认推荐的路线。我不建议新手从 OpenHarmony 系统源码或者驱动开发入手，那是另一个方向；先把应用层做熟，再决定要不要往系统底层走，会从容很多。
ArkTS 是鸿蒙应用开发的主语言，本质是 TypeScript 的严格类型版本，但和标准 TS 有一些差异。比如它对类型的要求更严格，不推荐使用 any，对象字面量必须对应显式声明的 interface 或 class。对一个初学阶段的小项目来说，这种约束反而让人安心，代码不容易写飞。我见过不少从 JS 转过来的同学，一开始觉得这种限制很烦，写两天就会认同：类型约束让代码可读性高很多，改起来也敢下手。
ArkUI 是声明式 UI 框架，和 SwiftUI、Jetpack Compose 是同一套思路：界面由状态驱动，状态变了界面自动刷新。如果之前用过 Vue 或 React，会觉得很亲切；如果只写过 Android 传统 View 体系，那第一天会有个适应过程。最大区别在于，你不再手动操作控件，而是声明“当状态是什么样时，界面长什么样”，剩下的交给框架。
Stage 模型是当前 HarmonyOS 官方推荐的应用模型，新建工程默认就是这个。App 的启动入口、页面管理、组件生命周期都归它管。对 Day02 的项目来说，我们基本不用主动碰它，但建立一个基本认知很有必要：你写的页面组件，被 EntryAbility 加载，挂在 Stage 模型之下运行。这套组合之外，其实还有用 JS 或者 Java 做鸿蒙开发的老路，但已经不适合新项目了。另外提一句，现在 HarmonyOS 的设备形态从手机、平板扩展到车机、智慧屏甚至 PC，ArkTS/ArkUI 这套应用层技能在多个设备形态上都通用，这也是我决定从应用层切入学习路线的原因。给想找工作的同学提一句：面试时讲清楚“你用 ArkUI 做过什么”，比背一堆系统概念要加分，因为这说明你有实际动手能力。
1.3 应用场景与学习价值：小项目的大收获
生肖卡抽奖是个玩具项目，但它覆盖的能力点非常集中。状态管理上，会用到 @State 修饰符，这是 ArkUI 最核心的状态驱动机制；组件布局上，会用到 Column、Row、Stack 这几个最常用的容器组件；动画上，会用到 animateTo 显式动画和 rotate 属性；逻辑上，会锻炼到随机算法、防重复点击、数组更新。这些能力点，是后面做任何页面都绕不开的基础。
如果你把学习周期拉长一点看：Day01 学会了页面架构和基本组件，Day02 用一个小项目把状态、布局、动画串联起来，Day03 再往这个项目里加列表、路由