基于 Harmony 6.0 应用的瑜伽教学应用首页实现
前言
瑜伽是一种身体和心灵双重投入的运动，它的特殊性在于"无器械、可在家、需指导"——一块瑜伽垫加一块手机屏幕，就能开始一节高质量的练习。这种应用的首页要回答四件事——“今天练什么 / 我练到哪了 / 有什么新课程 / 我能跟谁一起练”。Harmony 6.0 时代，瑜伽类应用迎来了几个独特的能力红利——AVCodecKit 提供高质量视频播放、HealthKit 让心率和热量消耗自动同步、超级终端让用户在智慧屏大屏练习、AI 助手能力让动作识别和纠正成为可能。本文用 Flutter 在 Harmony 6.0 上实现一个瑜伽教学首页。
背景
瑜伽类应用的视觉关键词是"宁静、舒展、专业"——宁静对应"色彩柔和不刺眼",舒展对应"大留白",专业对应"课程体系清晰"。粉紫色 #C084FC 配深紫 #6D28D9 是这类应用的典型主色——既有"宁静"又有"东方禅意"。本项目首页 5 个模块：渐变 Header（今日推荐课程 + 大开始按钮）、4 大流派分类（哈他 / 阴瑜伽 / 流瑜伽 / 冥想）、本周计划进度卡片、推荐老师横滑、社区练习打卡。从产品角度，瑜伽类应用最大的复购点是"日复一日的练习"——用户需要被"今天练什么"持续引导，否则容易半途而废。鸿蒙的桌面服务卡片让"今日推荐课程"在桌面常驻，用户每天打开手机就能看到"今天 20 分钟，跟我一起练吧"。
Flutter × Harmony 6.0 跨端开发介绍
Harmony 6.0 在视频教学类应用上的能力栈非常完整——AVCodecKit 提供高质量视频解码、超级终端让视频可投屏到智慧屏、HealthKit 提供运动数据同步、AI 助手能力提供动作识别。Flutter 嵌入 Harmony 6.0 的方案在这种"重视频 + 轻交互"应用上需要做架构分工——主页用 Flutter 自绘提供丰富 UI，视频播放能力建议用 ArkTS 端 ArkUI Video 组件原生实现，与系统手势集成更深。Skia 引擎对粉紫色（#C084FC / #6D28D9 / #DDD6FE）的渲染极其细腻，整页氛围既宁静又禅意。
开发核心代码
代码一：今日推荐课程 Header
Header 必须把"今日推荐课程"做成视觉中心。我用一个粉紫渐变 Container，顶部一行"晨间瑜伽 · 唤醒身体"+ 老师名，中部一个圆形"开始练习"按钮 + 时长 chip。
Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_primaryLight],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.self_improvement,color:Colors.white,size:22),SizedBox(width:8),Text('晨光瑜伽',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.notifications_none,color:Colors.white,size:22),]),constSizedBox(height:18),constText('今日推荐 · 第 12 课',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:6),constText('晨间唤醒 · 14 个体式',style:TextStyle(color:Colors.white,fontSize:24,fontWeight:FontWeight.w900)),constSizedBox(height:8),constRow(children:[Icon(Icons.access_time,color:Colors.white70,size:14),SizedBox(width:4),Text('20 分钟 · 初级',style:TextStyle(color:Colors.white70,fontSize:12)),SizedBox(width:12),Icon(Icons.person,color:Colors.white70,size:14),SizedBox(width:4),Text('老师 · 阿莲',style:TextStyle(color:Colors.white70,fontSize:12)),]),constSizedBox(height:16),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.play_arrow,color:_primary,size:24),SizedBox(width:6),Text('开始练习',style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),],),);}"开始练习"按钮在生产业务里点击后会拉起视频播放。鸿蒙 6.0 推荐使用超级终端流转能力——用户在手机上开始播放后，可以一键投屏到智慧屏继续，让大画面瑜伽教学成为现实。
从「今日推荐课程 Header」的氛围营造与场景共鸣设计角度再补一段。瑜伽类应用的 Header 必须传递「平静、内观、从容」的氛围。这段 Header 用淡紫到玫红的渐变背景，紫色传递「冥想、平静」、玫红传递「温柔、女性向」的视觉气质，配合「今日推荐 · 30 分钟全身舒缓」标题 + 「开始练习」按钮的双段式排版，让用户感受到「现在就可以静下来」。如果未来要扩展支持「时段化推荐」（早上推荐唤醒瑜伽、晚上推荐睡前瑜伽），可以根据系统时间动态切换 Header 内容，鸿蒙端 ArkTS 的 Date API 与 Dart 的 DateTime 完全对应。
代码二：4 大流派分类
瑜伽流派分类用 4 等分网格——哈他、阴瑜伽、流瑜伽、冥想。每项一个独立色相图标。
Widget_categories(){finalitems=const[[Icons.spa,'哈他',_primary],[Icons.nightlight,'阴瑜伽',_purple],[Icons.air,'流瑜伽',_cyan],[Icons.psychology,'冥想',_amber],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalc=it[2]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.16),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:24),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),]));}).toList()),);}4 大流派（哈他、阴瑜伽、流瑜伽、艾扬格）覆盖了主流瑜伽类型，让不同需求的用户能快速找到合适的流派。每个流派用主题色浅背景 + 流派名 + 简短描述的卡片呈现，色彩柔和契合瑜伽的「内观」气质。
从「4 大流派分类」的瑜伽专业性与用户引导设计角度再补一段。瑜伽流派对入门用户来说是陌生概念——必须用图标 + 简短描述帮助用户快速理解每个流派的差异。哈他用主蓝表达「平衡」、阴瑜伽用紫色表达「深度静止」、流瑜伽用青色表达「流动」、艾扬格用绿色表达「精准对齐」。这种「色彩 = 流派意境」的设计对入门用户友好。如果未来要扩展支持「按身体部位筛选」（颈椎、腰部、髋部）等更精细的需求，可以在分类下方加 chip 切换栏，鸿蒙 6.0 的 Skia 对这种多维度筛选 UI 的渲染开销极低。
代码三：本周计划进度卡片
本周练习进度用 7 个圆点排成一行表示——已完成的圆点用主色填充，未完成的用浅色。
Widget_weekPlan(){finaldone=const[true,true,false,true,false,false,false];finaldays=const['一','二','三','四','五','六','日'];returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Text('本周练习计划',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),Spacer(),Text('已完成 3 / 7 · 完成率 43%',style:TextStyle(color:_primary,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:16),Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){returnColumn(children:[Container(width:36,height:36,decoration:BoxDecoration(shape:BoxShape.circle,color:done[i]?_primary:_primary.withValues(alpha:0.12)),alignment:Alignment.center,child:Icon(done[i]?Icons.check:Icons.lock_outline,color:done[i]?Colors.white:_primary,size:18),),constSizedBox(height:6),Text(days[i],style:TextStyle(color:done[i]?_ink:_sub,fontSize:11)),]);})),]),);}每天练习完成情况存储到分布式数据对象，多端同步——用户在手机上完成练习，平板和智慧屏立刻能看到打勾。
从「本周计划进度」的连续打卡心理与目标驱动设计角度再补一段。健身类应用的核心留存机制是「不要断掉」——用户一旦看到自己已经连续打卡 3 天，就会有「不能断在第 4 天」的心理压力。这段进度卡用 7 个圆点表示一周 7 天，已完成的用主题色实心圆，未完成的用浅色空心圆，让用户一眼识别「我已经坚持了几天」。如果未来要扩展支持「连续打卡奖励」（连续 7 天获得徽章），可以在卡片右上角加一个奖杯图标，骨架不变。鸿蒙 6.0 的 PushKit 可以做「打卡提醒」推送，用户错过打卡时及时唤醒，配合系统级保活让提醒准时到达。
心得
瑜伽类 App 的视觉灵魂是"宁静 + 仪式"——粉紫色给宁静，圆点进度给仪式感。开发时最容易犯的错是把课程列表做得太像电商商品列表，反而稀释了"瑜伽是一种修行"的氛围。我的策略是用单一主色贯穿，让整页保持禅意。从能力扩展角度，瑜伽类应用最值得在鸿蒙端打造的是"超级终端投屏 + AI 动作识别 + HealthKit 心率联动"三件套——投屏让大画面瑜伽教学成为现实、AI 识别让动作纠正成为可能、HealthKit 让运动数据自动沉淀。
总结
本篇实现了 Harmony 6.0 端的瑜伽教学首页，5 个模块、纯 UI、零依赖、约 320 行代码。骨架可直接迁移到健身、舞蹈、太极等多种身体训练类应用。从扩展角度建议生产业务里：把视频播放接入 ArkUI Video 原生组件；把投屏接入超级终端能力；把动作识别接入 NeuralNetworkRuntime；把心率监测接入 HealthKit；把"今日推荐课程"做成 FormExtensionAbility 桌面卡片。下一篇是第十一组的最后一块——用药提醒与记录系统。
