登录社区云，与社区用户共同成长
邀请您加入社区
《鸿蒙应用开发》课程架构，面向高职软件技术专业，系方向性实践课，支撑华为鸿蒙认证及鸿蒙应用开发岗位。以 ArkTS 与 ArkUI 声明式范式为核心，分九章：生态环境、语言基础、界面开发、状态导航、Ability 框架、数据网络、权限系统能力、发布优化、项目实战。贯穿声明式思维、状态驱动、分布式工程化三条主线。
三区结构：Header（保养日志）+ SummaryCard（双列统计）+ SectionTitle + Timeline（圆点竖线时间轴）核心交互：无点击（纯展示），32×32 浅青圆标 + 红色金额主题色#008080青蓝——统计次数、圆标浅青底数据闭环：日志 12080/480 → 首页 500km，12/3860 → 我的页 12/3.8k，保养记录 → 日志时间轴。
四区结构：Header（加油记录）+ FuelCard（油耗渐变卡）+ QuickStats（三列快查）+ RecordList（3 条加油记录）核心交互：无点击（纯展示），油耗卡 34 号数值 + 48 号图标主题色#FF6B35活力橙 →#FFA078浅橙渐变，浅橙软底图标数据闭环：首页 7.2/1035/1020 → 分析页 7.2/8月1035/半年4668 → 我的页 68 次，四页同源
四区结构：UserCard（爱车渐变卡）+ StatRow（负边距统计）+ MenuList（四菜单）+ About（版本号）核心交互：菜单行点击 Toast（档案/历史/提醒/设置）、悬浮统计行主题色#FF6B35→#FFA078渐变卡，活力橙主题贯穿数据闭环：我的页 68/28k/38k = 首页 3 条/12580 + 分析页 4668，车辆信息贯穿用户卡与车辆档案菜单。
三区结构：Header（油耗分析）+ SummaryRow（双指标汇总）+ FuelTrend（油耗趋势柱）+ CostChart（油费趋势柱）核心交互：无点击（纯数据展示），双柱状图两种高度公式主题色#FF6B35活力橙（油耗柱）+#FFA078浅橙（油费柱）数据闭环：分析页 7.2/4668/8月1035 → 首页 7.2/1035 → 加油页录入，四页同源。
三区结构：Header（停车记录）+ BalanceCard（深灰渐变汇总）+ RecordList（免费/收费双态列表）核心交互：停车卡片点击 Toast（详情入口）、免费记录绿色标识主题色#2D3436深灰黑 →#636E72灰渐变，白字呈现，浅灰软底图标数据闭环：首页 286/18/56 → 费用页 286/8月 → 我的页 156 次，四页同源。
四区结构：Header（费用统计）+ SummaryCard（月度渐变卡）+ BarChart（五柱趋势图）+ SectionTitle + PlaceList（地点消费）核心交互：无点击（纯数据展示），柱状图 ArkUI 手绘主题色#2D3436深灰黑——月度卡渐变、柱状图柱体、地点金额数据闭环：费用页 286/6月310/公司400 → 首页 286/公司20 → 记录页常用地点，四页同源。
四区结构：UserCard（车主渐变卡）+ StatRow（负边距统计）+ MenuList（四菜单）+ About（版本号）核心交互：菜单行点击 Toast（车辆/地点/记录/设置）、悬浮统计行主题色#2D3436→#636E72渐变卡，深灰主题贯穿数据闭环：我的页 156/2.8k = 首页 18 次/286 元的累计口径，车牌贯穿用户卡与车辆菜单我的页是停车缴费记录的"车主个人中心"——身份
首页以"红色渐变告警卡 + 临期双条件渲染列表"完成了续费扣款的预警总览。珊瑚红告警卡（⏰40 号横排横幅 + 两级文案）、同源双条件（副文案变红 + 临期胶囊条件渲染）、48×48 淡红底图标块、列表按剩余天数升序（最紧急置顶）——92 行代码，一个"先喊威胁 → 再列明细"的扣款预警页，也是"事件驱动"型首页的标准范式。
添加页以"双卡分离表单 + 三档提醒胶囊"完成了续费提醒的录入闭环。FormCard 四件套（名称/金额 Number 键盘/周期 3 等分胶囊/日期）+ RemindCard 独立成卡（remindDays天数直存、默认 3 天与首页临期阈值同源）、名称三元校验——97 行代码，一个"录服务 → 设周期 → 定提醒 → 保存"的提醒建档页，也是"属性与规则分卡"型表单的标准范式。
日历页以"三列三色汇总卡 + 红点竖线时间轴"完成了全年扣款的线性可视化。白底彩字汇总卡（C.primary红 /C.accent浅红 /C.ok绿 三色编码金额/数量/均值）、12×12 珊瑚红圆点 +条件竖线（末项自然收束）、节点与卡片顶对齐——103 行代码，一个"年度看总账 → 时间轴看流程"的续费日历页，也是"纵向时间轴"型日历的标准范式。
我的页以"红色渐变用户卡 + 负边距统计 + 推送开关 + 四菜单"完成了续费提醒的个人中心。珊瑚红渐变用户卡（⏰ 符号 + 5 项背书）、悬浮统计行（5/¥746/12 与日历页同源）、Toggle开关红色选中态（默认开 + 推送语义）、0.5 细 Divider 四菜单——114 行代码，一个"亮身份 → 看总账 → 管推送 → 进工具"的个人中心页，也是"提醒类应用开关卡"的标准范式。
首页以"紫色渐变汇总卡 + 四色品牌列表"完成了订阅支出的总览展示。梦幻紫渐变汇总卡（32 号月度金额 + 两列副统计）、48×48 品牌色软底图标块（透明度拼接）、品牌色金额强调（金额色 = 品牌色）、Blank()弹性占位 SectionTitle——102 行代码，一个"看月付 → 查项数 → 对照年度"的订阅总览页，也是"品牌色编码"型首页的标准范式。
订阅页以"横向滚动分类胶囊 + 自动续费开关卡"完成了订阅的管理闭环。横向滚动分类栏（白底胶囊融合背景 + 紫色选中突出）、ToggleSwitch 开关嵌入每张卡片（主紫 +onChange即改即存）、浅拷贝触发重渲染——101 行代码，一个"筛选分类 → 查扣款日 → 切续费"的订阅管理页，也是"列表 + 开关"一体化管理的标准范式。
统计页以"手写柱状图 + 双层 Stack 进度条"完成了订阅支出的全面分析。纯 ArkUI 柱状图（不引图表库 + 底部对齐 + 顶部圆角）、Stack双层进度条（灰底 100% + 彩色 percent% +百分比字符串）、36 号年度总额 + 两级透明度副文案——108 行代码，一个"年度总览 → 月度趋势 → 分类结构"的纯数据可视化页，也是"手绘图表"型统计页的标准范式。
日历页以"手写 7 列月历网格 + 续费计划列表"完成了扣款日期的可视化。7 列网格 +续费日判定（紫色圆底白字正圆）、34×34 日期格子 +rowsGap(6)行间距、紫色日期块 + 红色金额的计划列表——109 行代码，一个"日历看哪天扣款 → 列表看扣什么扣多少"的扣款日历页，也是"支出日历"型页面的标准范式。
首页以"三列渐变汇总卡 + 三态商品列表"完成了保修管理的告警总览。生态绿渐变汇总卡（三列平级 8/2/1）、50×50 淡绿底 emoji 图标块、三元状态机渲染（在保绿/临期橙/过保红 + 状态胶囊字色底色双变化）、Blank()弹性占位 SectionTitle——108 行代码，一个"看总量 → 盯临期 → 处理过保"的保修总览页，也是"时间管理"型首页的标准范式。
我的页以"渐变用户卡 + 负边距统计 + 提醒开关 + 四菜单"完成了个人中心与提醒中枢的构建。生态绿渐变用户卡（64×64 半透明圆头像 + 8 件商品背书）、负边距悬浮统计行（三列 8/2/15）、ToggleSwitch 开关（主绿 + 30 天阈值与首页联动）、0.5 细 Divider 四菜单列表——114 行代码，一个"看身份 → 看统计 → 设提醒 → 进工具"的个人中心页，也是"提
商品页以"全宽虚线照片卡 + 五件套档案表单 + 校验保存"完成了商品的建档闭环。绿色虚线边框暗示可点击上传区、Flex换行胶囊（5 分类）+Row等分胶囊（4 期限）双布局按选项适配、三元校验'商品已保存' : '请填写商品名称'以名称为锚点——106 行代码，一个"拍凭证 → 填档案 → 设期限 → 校验保存"的商品建档页，也是"凭证 + 档案"双录型表单的标准范式。
保修页以"保修信息卡 + 售后电话列表"完成了保修信息的双查询。Divider细线分区保修卡上下两区（商品标识 + 三列时间信息）、C.warn橙色强调剩余天数、📞 图标精确点击（整卡不响应、仅图标可点）、4 条售后覆盖"官方 + 第三方"两类渠道——100 行代码，一个"看剩余天数 → 找售后电话 → 一键呼叫"的保修查询页，也是"时间 + 渠道"双信息页的标准范式。
首页以"渐变汇总卡 + 票据列表"完成了电子票据的总账展示。科技蓝渐变汇总卡（32 号主金额 + 两列副统计）、44×44 淡蓝底 emoji 图标块、三栏列表行（图标+标题+金额）、Blank()弹性占位 SectionTitle——102 行代码，一个"看总额 → 查明细 → 去报销"的票据总览页，也是财务工具型首页的标准范式。
我的页以 99 行代码完成了票据管家的个人中心——蓝色渐变 UserCard 配 🧾 票据头像、"票据管家"身份 + "48 张 · 6600 元"数据背书、负边距悬浮三列统计卡（48/¥6.6k/12）、5 菜单覆盖"搜索/统计/导出/备份/设置"。**"导出报销单"**是财务场景独有功能——首页"可报销 ¥856"的执行入口，让票据管理从"记录"到"报销"形成闭环。
分类页以"2 列彩色网格"完成了票据的归类总览。HEX 透明度拼接派生图标浅底、分类色金额着色（一卡一色 + 金额同色）、2 列网格 3 行排布——70 行代码，一个"钱都花在哪类一目了然"的统计页，也是分类色体系的典型实现。
上传页以"双虚线上传卡 + 四件套表单 + 校验保存"完成了票据的录入闭环。蓝色虚线边框暗示可点击上传区、数字键盘降低金额输入错误、换行胶囊单选减少操作步骤、三元校验'票据已保存' : '请填写金额'以金额为锚点——107 行代码，一个"拍照/上传 → 填表单 → 校验保存"的票据进库页，也是录入型页面的标准参考。
首页以"深灰 Banner + 规格网格"完成了证件照工具的规格选择。深灰渐变传达专业正式感、6 种常用规格（Spec接口含毫米+像素双标注）、40×52 模拟证件照图块、3 列网格——91 行代码，一个"选好规格就开工"的证件照首页，也是工具型产品规格选择页的标准范式。
编辑页以"预览卡 + 背景/尺寸/美颜 + 保存"完成了证件照的加工。驱动实时联动（所见即所得）、44×44 色圆选中 3 宽描边、等分胶囊、Slider美颜 0-100 实时百分比（系列首次连续调节）——117 行代码，一个"改背景/调尺寸/美颜到满意"的编辑页，也是编辑器所见即所得模式的标准参考。
拍摄页以"相机预览卡 + 双按钮 + 贴士"完成了照片来源的引导。Stack三层叠加（深灰底 + 半透明人像 + 140×180 白色虚线框）是取景引导的核心、双按钮主次分明、4 条 ✓ 拍摄规范是合格证件照的检查清单——78 行代码，一个"按规范拍好证件照"的拍摄页，也是相机引导类页面的标准参考。
鸿蒙应用开发
——鸿蒙应用开发
联系我们（工作时间：8:30-22:00）
400-660-0108 kefu@csdn.net
人工智能6S服务平台
HarmonyOS开发者社区
