基于 Harmony 6.0 应用的语音日记本应用首页实现前言写日记是一种被电子设备稀释了的生活仪式——曾经我们每天写几页纸现在则是把心情碎片散落在朋友圈、微信、备忘录里。语音日记是这种仪式感的回归——用一段 30 秒的语音记录今天的心情比打字轻松、比录像更有私密感、比朋友圈更长情。这种应用的首页要回答四件事——“今天的语音我录了吗 / 这一年我录了多少天 / 最近的语音听起来怎么样 / 我的语音去了哪里”。Harmony 6.0 时代语音日记应用迎来了几个独特的能力红利——AudioKit 提供高质量音频录制48kHz / 16bit、隐私沙盒让语音数据不出端、HMS Cloud 提供端到端加密的云端备份、HealthKit 让语音情绪与生物指标关联分析。本文用 Flutter 在 Harmony 6.0 上实现一个语音日记首页作为本系列第九组的开篇。背景语音日记类应用的视觉关键词是私密、温柔、有仪式感——私密对应色彩偏暗偏夜晚,温柔对应圆角和大留白,仪式感对应今日打卡按钮必须显著。深紫色 #4C1D95 配粉紫 #C084FC 是这类应用的典型主色——既有夜晚又有梦境。本项目首页 5 个模块渐变 Header今日打卡按钮 累计天数、心情选择器横滑、最近的语音卡片列表彩色波形 时长 心情、月度坚持热力图、语音云端备份提示。从产品角度语音日记最大的复购点是连续打卡——用户每天在固定时间录一段逐渐成为习惯。鸿蒙 6.0 上做这种日打卡的最佳实践是 PushKit 定时推送 桌面服务卡片——每晚 22:00 推送今天的语音还没录哦桌面卡片显示已连续打卡 X 天。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在音频类应用上的能力栈非常完整——AudioKit 提供高质量录制和播放、隐私沙盒确保音频数据不外泄、HiCloud 提供端到端加密备份、HealthKit 提供生物指标关联、PushKit 提供定时提醒。Flutter 嵌入 Harmony 6.0 的方案在这种轻交互 长沉淀的应用上非常合适——主页用 Flutter 自绘提供丰富 UI音频录制和播放通过 ArkTS 端 AudioKit 接入。Skia 引擎对深紫色#4C1D95 / #6D28D9的渲染极其通透OLED 屏下深紫几乎可以省 30% 电量对常驻型记录类应用是天然能耗利好。开发核心代码代码一今日打卡 HeaderHeader 必须把今日打卡按钮做成视觉中心——这是用户每天打开 App 的核心动作。我用一个深紫渐变 Container顶部一行已连续打卡 X 天 累计 Y 天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(children:[constRow(children:[Icon(Icons.auto_stories,color:Colors.white,size:22),SizedBox(width:8),Text(我的语音日记,style:TextStyle(color:Colors.white,fontSize:16,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.calendar_month,color:Colors.white,size:22),]),constSizedBox(height:14),Row(mainAxisAlignment:MainAxisAlignment.center,children:[Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Colors.white.withValues(alpha:0.22),borderRadius:BorderRadius.circular(6)),child:constText(已连续 18 天,style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w700)),),constSizedBox(width:6),Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Colors.white.withValues(alpha:0.22),borderRadius:BorderRadius.circular(6)),child:constText(累计 138 天,style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w700)),),]),constSizedBox(height:22),Container(width:110,height:110,decoration:BoxDecoration(shape:BoxShape.circle,color:Colors.white,boxShadow:[BoxShadow(color:Colors.black.withValues(alpha:0.22),blurRadius:22,offset:constOffset(0,10))]),child:constIcon(Icons.mic,color:_primary,size:56),),constSizedBox(height:14),constText(点按 · 录下今天,style:TextStyle(color:Colors.white,fontSize:15,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(30 秒 - 5 分钟皆可,style:TextStyle(color:Colors.white70,fontSize:11)),]),);}大圆形录音按钮在生产业务里点击后触发 AudioKit 的高质量录音48kHz / 16bit 的音质比微信语音清晰得多更适合长期保存。鸿蒙 6.0 的隐私沙盒让录音文件落盘到 hap 沙盒下的 files 目录其他 App 无法访问。从「今日打卡 Header」的仪式感与中心交互设计角度再补一段。语音日记类应用的 Header 必须传递「现在就开始记录」的仪式感。这段 Header 用「今日打卡」标题 大圆形录音按钮 已打卡天数的三段式排版让用户一眼就能识别核心动作。大圆形录音按钮做成 110 像素的纯白色圆形配深色阴影在主题色背景上像「发光按钮」一样醒目。「已坚持 X 天」用小字号显示强化用户的成就感而不抢主按钮的视觉。如果未来要支持「连续打卡奖励」可以在 Header 加一个进度条 chip骨架不变。代码二心情选择器让用户在录音前选定今天的心情是仪式感的一部分。我做成一个横滑 chip 栏列出 5 种心情 emoji 文字。被选中的心情 chip 用主色填充。Widget_moodPicker(){finalitemsconst[[,开心,_amber],[,平静,_cyan],[,焦虑,_orange],[,难过,_primary],[,思考,_green],];returnSizedBox(height:84,child:ListView.separated(scrollDirection:Axis.horizontal,itemCount:items.length,separatorBuilder:(_,__)constSizedBox(width:10),itemBuilder:(_,i){finalmitems[i];returnContainer(width:76,padding:constEdgeInsets.symmetric(vertical:12),decoration:BoxDecoration(color:(m[2]asColor).withValues(alpha:0.12),borderRadius:BorderRadius.circular(14),),child:Column(children:[Text(m[0]asString,style:constTextStyle(fontSize:26)),constSizedBox(height:6),Text(m[1]asString,style:TextStyle(color:m[2]asColor,fontSize:12,fontWeight:FontWeight.w700)),]),);},),);}心情数据建议接入 HealthKit——把每天的心情记录与睡眠时长、运动量、心率波动等生物指标关联生成心情报告。这种端到端的数据融合是 Harmony 6.0 端独有的体验红利。从「心情选择器」的 emoji 化交互与情绪标签设计角度再补一段。心情选择必须做成极其轻量的一键操作。这段选择器用 5 个 emoji 标签 chip 横向排布开心、平静、烦躁、难过、愤怒每个 chip 用对应情绪色黄、青、橙、灰蓝、红做识别让用户在 0.5 秒内完成选择。chip 形态做成圆角胶囊比方形更亲切。点击后触发 setState 让选中 chip 变实心、其他变浅色提供即时视觉反馈。这种轻量交互在国内日记类应用Moo、格志日记都有验证是用户每日打开的核心入口。如果未来要支持「次级情绪标签」在主情绪下选择「焦虑、孤独、感动」等细化情绪可以在 chip 下方做一个二级展开层骨架不变。代码三最近语音列表每条语音卡片需要包含日期、心情 emoji、波形可视化、时长、心情标签。我用 Container 包裹左侧日期 心情右侧波形 时长。Widget_voiceCard(MapString,dynamicv){returnContainer(margin:constEdgeInsets.only(bottom:10),padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Row(children:[Container(width:50,height:50,decoration:BoxDecoration(color:(v[color]asColor).withValues(alpha:0.16),borderRadius:BorderRadius.circular(14)),alignment:Alignment.center,child:Text(v[mood]asString,style:constTextStyle(fontSize:22)),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(v[date]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:8),Row(children:List.generate(20,(i){finalh[6,12,8,16,10,4,14,18,8,12,6,10,16,8,14,6,12,10,6,8][i].toDouble();returnPadding(padding:constEdgeInsets.only(right:2),child:Container(width:3,height:h,decoration:BoxDecoration(color:v[color]asColor,borderRadius:BorderRadius.circular(1.5)),),);})),],)),Column(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(v[duration]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:6),Container(width:32,height:32,decoration:BoxDecoration(color:(v[color]asColor).withValues(alpha:0.18),borderRadius:BorderRadius.circular(16)),child:Icon(Icons.play_arrow,color:v[color]asColor,size:18),),]),]),);}波形可视化用 20 根高度不同的小竖条模拟纯 Container 实现无需引入任何图表库。鸿蒙 6.0 的 Skia 渲染对这种几十个小 Container 的组合开销极低单帧绘制不到 1ms。从「最近语音列表」的音频卡片视觉设计角度再补一段。语音日记列表的核心是「让用户快速回顾过往日记」。这段卡片用「波形可视化 日期 时长 心情 chip 播放按钮」五段信息塞在一行卡片里。波形作为卡片左侧的视觉锚点比传统的灰色音频图标更有识别度——每条日记的波形都是独一无二的。心情 chip 用对应情绪色填充高亮让用户可以「按心情回放」找到特定情绪下的日记。如果未来要支持「按日期回看」「按情绪筛选」可以在列表顶部加 chip 切换栏骨架不变。鸿蒙 6.0 的 AudioKit 对短音频的播放唤起延时极低点击播放按钮到出声小于 100ms。心得语音日记类 App 的视觉灵魂是夜晚 私密——深紫色给夜晚圆角和大留白给私密。开发时最容易犯的错是把语音卡片做得太花哨反而稀释了私密记录的氛围。我的策略是只让 Header 用深紫渐变作为视觉中心其他模块用白底卡片让今日打卡成为唯一抢眼的元素。从能力扩展角度语音日记最值得在鸿蒙端打造的是AudioKit 隐私沙盒 HealthKit三件套——AudioKit 提供高质量录制、隐私沙盒确保数据不外泄、HealthKit 让心情与生物指标关联。这种端到端的私密能力是 Android 端难以做到的。总结本篇实现了 Harmony 6.0 端的语音日记首页5 个模块、纯 UI、零依赖、约 320 行代码。骨架可直接迁移到日记本、心情记录、冥想记录等多种私密类应用。从扩展角度建议生产业务里把音频录制接入 AudioKit把语音存储接入隐私沙盒和 HiCloud 端到端加密备份把心情数据接入 HealthKit把今日打卡做成 FormExtensionAbility 桌面卡片把录今天的日记接入 AI 助手语义路由。下一篇是第九组的第二块——家庭相册共享应用。