当前位置：首页 > news >正文

基于 Harmony 7.0 应用的宠物翻译应用首页实现

news 2026/6/22 8:01:21

基于 Harmony 7.0 应用的宠物翻译应用首页实现

前言

“喵星人到底在说什么？”——这是每个猫奴都曾好奇的问题。宠物翻译应用通过AI分析宠物的叫声频率、持续时间和音调变化，推测其情绪和需求——从"饿了"到"想玩"，从"开心"到"不开心"。虽然这不是真正的"语言翻译"（宠物没有人类语言），但声学模式识别技术确实能从叫声中提取有价值的信息。本文展示如何利用Flutter在Harmony 7.0平台上构建宠物翻译应用，整合了录音按钮（120px橙色圆形+麦克风图标）、宠物类型选择器（猫🐱/狗🐶/仓鼠🐹/兔子🐰）、翻译记录列表三大核心模块。在Harmony 7.0上，AI音频分析在DSP上端侧运行，音频数据不出设备。

背景

宠物翻译的核心吸引力在于"趣味+好奇心"。应用展示一个120px橙色圆形麦克风按钮（带30px橙色外发光），用户选择宠物类型（猫/狗）后按住录音，松开后AI分析叫声并生成"翻译结果"（如"饿了，快给我吃的！"）。翻译记录按时间排列展示。在Harmony 7.0上，DSP音频分析引擎分别训练猫狗叫声模型。

Flutter × Harmony 7.0 跨端开发技术选型

应用采用橙色（#F97316）作为主题色。录音按钮使用120×120px橙色实心圆形+30px橙色模糊阴影+48px白色麦克风。宠物类型使用4个_PetType组件（emoji+名称+2px橙色高亮）。翻译记录使用白色卡片列表，每条包含宠物emoji+叫声原文+翻译结果+时间。

核心代码解析

一、录音按钮——120px圆形与AI分析触发

录音按钮使用120×120px大圆形橙色按钮，30px橙色外发光增加视觉吸引力。长按录音、松开分析。

Widget_record(){returnColumn(children:[Container(width:120,height:120,decoration:BoxDecoration(shape:BoxShape.circle,color:_primary,boxShadow:[BoxShadow(color:_primary.withValues(alpha:0.3),blurRadius:20,),],),alignment:Alignment.center,child:constIcon(Icons.mic,color:Colors.white,size:48),),constSizedBox(height:14),constText('录制宠物叫声',style:TextStyle(color:Color(0xFF1F2937),fontSize:14,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText('AI识别宠物情绪和需求',style:TextStyle(color:Color(0xFF9CA3AF),fontSize:11)),]);}

在Harmony 7.0上，录音通过麦克风以16kHz采样率采集单声道PCM数据。DSP音频分析引擎对录音进行声学特征提取（MFCC），然后将特征送入分别训练的猫/狗CNN模型进行分类。猫叫声模型分类为：饿了/想玩/开心/生气/撒娇（5类），狗叫声模型分类为：开心/警惕/饿了/想出去/不舒服（5类）。

二、宠物类型选择——分类模型

猫狗使用不同的AI分析模型（叫声特征差异大：猫叫600-1200Hz、狗叫200-800Hz）。

Widget_types(){returnRow(children:const[_PetType('🐱','猫',true),_PetType('🐶','狗',false),_PetType('🐹','仓鼠',false),_PetType('🐰','兔子',false),]);}class_PetTypeextendsStatelessWidget{finalStringemoji,label;finalbool active;const_PetType(this.emoji,this.label,this.active);@overrideWidgetbuild(BuildContextcontext){returnExpanded(child:Container(padding:constEdgeInsets.all(12),margin:constEdgeInsets.only(right:8),decoration:BoxDecoration(color:constColor(0xFFFFFFFF),borderRadius:BorderRadius.circular(14),border:active?Border.all(color:constColor(0xFFF97316),width:2):null,),child:Column(children:[Text(emoji,style:constTextStyle(fontSize:32)),constSizedBox(height:4),Text(label,style:constTextStyle(color:Color(0xFF6B7280),fontSize:10)),]),),);}}

三、翻译记录——情绪颜色编码

翻译记录使用颜色编码区分情绪：橙色=普通需求（饿了）、绿色=积极情绪（想玩）、红色=消极情绪（不开心）。

Widget_history(){finallist=const[['🐱','喵~','饿了，快给我吃的！','今天 12:00',Color(0xFFF97316)],['🐱','喵呜~','想和你玩一会儿','今天 09:00',Color(0xFF10B981)],['🐱','嘶——','不开心，别碰我','昨天 20:00',Color(0xFFEF4444)],];returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[constPadding(padding:EdgeInsets.only(left:4,bottom:10),child:Text('翻译记录',style:TextStyle(color:Color(0xFF1F2937),fontSize:14,fontWeight:FontWeight.w800)),),...list.map((l){finalc=l[4]asColor;returnContainer(margin:constEdgeInsets.only(bottom:6),padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:constColor(0xFFFFFFFF),borderRadius:BorderRadius.circular(14),),child:Row(children:[Text(l[0]asString,style:constTextStyle(fontSize:28)),constSizedBox(width:10),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(l[1]asString,style:constTextStyle(color:Color(0xFF1F2937),fontSize:13,fontWeight:FontWeight.w700)),Text(l[2]asString,style:TextStyle(color:c,fontSize:11,fontWeight:FontWeight.w700)),])),Text(l[3]asString,style:constTextStyle(color:Color(0xFF9CA3AF),fontSize:9)),]),);}),]);}