Flutter for OpenHarmony实战DAY1从零搭建健康管家App之开发全记录欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net文章亮点纯实战向、零废话、可直接复刻运行、双IDE协同开发、适配OpenHarmony模拟器/真机前言随着OpenHarmony开源鸿蒙生态快速完善越来越多开发者开始尝试跨平台方案落地。Flutter凭借一套代码、多端渲染、高性能UI的优势搭配OpenHarmony的分布式底座非常适合快速开发健康、运动、工具类原生应用。本文带你从零完成Flutter for OpenHarmony 项目结构理解Android Studio DevEco Studio 双IDE协同开发健康管家App完整UI框架搭建干净零报错完整代码鸿蒙模拟器一键运行、常见编译错误根治一、开发环境准备1.1 必备工具清单Android StudioDevEco Studio NEXTFlutter OH适配版SDKOpenHarmony SDK鸿蒙模拟器/真机1.2 核心开发规则标准协同流程Android Studio 打开项目根目录 → 编写lib下Flutter业务代码注意代码规范DevEco Studio 打开项目中的 ohos目录检查工程配置确保Flutter与鸿蒙端适配正常启动鸿蒙模拟器 → 点击运行按钮 → App直接启动测试所有页面跳转和功能二、项目核心完整代码在lib文件夹下新建 pages 文件夹然后创建3个dart文件home_page.dart、data_page.dart、setting_page.dart2.1 入口文件 main.dartimportpackage:flutter/material.dart;importpages/home_page.dart;importpages/data_page.dart;importpages/setting_page.dart;voidmain(){// 去掉 const避免子组件非 const 报错runApp(constMyApp());}class MyApp extends StatelessWidget{constMyApp({super.key});override Widgetbuild(BuildContext context){returnMaterialApp(title:健康管家,theme:ThemeData(primarySwatch:Colors.blue,useMaterial3:true,),home:constMainPage(),debugShowCheckedModeBanner:false,);}}class MainPage extends StatefulWidget{constMainPage({super.key});override StateMainPagecreateState()_MainPageState();}class _MainPageState extends StateMainPage{int_currentIndex0;// 列表里的页面必须是 const 构造器final ListWidget_pagesconst[HomePage(),DataPage(),SettingPage(),];override Widgetbuild(BuildContext context){returnScaffold(body:_pages[_currentIndex],bottomNavigationBar:BottomNavigationBar(currentIndex:_currentIndex,onTap:(index){setState((){_currentIndexindex;});},items:const[BottomNavigationBarItem(icon:Icon(Icons.home_filled),label:健康概览,),BottomNavigationBarItem(icon:Icon(Icons.bar_chart),label:数据统计,),BottomNavigationBarItem(icon:Icon(Icons.settings),label:个人设置,),],),);}}2.2 健康概览页 home_page.dartimportpackage:flutter/material.dart;class HomePage extends StatelessWidget{// 加上 const 构造器constHomePage({super.key});// 成员变量设为 const避免报错final MapString,dynamichealthDataconst{step:8672,heartRate:72,sleep:7.5h,calorie:420,};override Widgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText(健康概览),centerTitle:true,),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[GridView.count(shrinkWrap:true,crossAxisCount:2,crossAxisSpacing:12,mainAxisSpacing:12,children:[_buildHealthCard(icon:Icons.directions_walk,title:今日步数,value:${healthData[step]} 步,color:Colors.blue,),_buildHealthCard(icon:Icons.favorite,title:当前心率,value:${healthData[heartRate]} 次/分,color:Colors.red,),_buildHealthCard(icon:Icons.bed,title:睡眠时长,value:healthData[sleep],color:Colors.purple,),_buildHealthCard(icon:Icons.fireplace,title:消耗卡路里,value:${healthData[calorie]} 大卡,color:Colors.orange,),],),constSizedBox(height:24),constText(今日健康提示,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold,),),constSizedBox(height:8),Container(padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:Colors.grey.withValues(alpha:0.1),borderRadius:BorderRadius.circular(8),),child:constText(今日步数已达标继续保持建议睡前1小时避免使用电子设备提升睡眠质量。,style:TextStyle(fontSize:14,color:Colors.grey),),),],),),);}Widget_buildHealthCard({required IconData icon,required String title,required String value,required Color color,}){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:color.withValues(alpha:0.1),borderRadius:BorderRadius.circular(12),),child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(icon,color:color,size:32),constSizedBox(height:8),Text(title,style:constTextStyle(fontSize:14,color:Colors.grey),),constSizedBox(height:4),Text(value,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,color:color,),),],),);}}2.3 数据统计页 data_page.dartimportpackage:flutter/material.dart;class DataPage extends StatelessWidget{// 加上 const 构造器constDataPage({super.key});final ListMapString,dynamicstepDataconst[{day:周一,step:7230},{day:周二,step:8950},{day:周三,step:6520},{day:周四,step:9180},{day:周五,step:7860},{day:周六,step:12500},{day:周日,step:8672},];override Widgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText(数据统计),centerTitle:true,),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(近7天步数统计,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold,),),constSizedBox(height:16),Expanded(child:ListView.builder(itemCount:stepData.length,itemBuilder:(context,index){final datastepData[index];returnListTile(leading:Container(width:40,height:40,decoration:BoxDecoration(color:Colors.blue.withValues(alpha:0.1),borderRadius:BorderRadius.circular(8),),child:Center(child:Text(data[day],style:constTextStyle(fontWeight:FontWeight.bold,color:Colors.blue,),),),),title:Text(${data[step]} 步),trailing:constIcon(Icons.arrow_forward_ios,size:16,color:Colors.grey),);},),),],),),);}}2.4 个人设置页 setting_page.dartimportpackage:flutter/material.dart;class SettingPage extends StatelessWidget{// 加上 const 构造器constSettingPage({super.key});override Widgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText(个人设置),centerTitle:true,),body:ListView(children:[ListTile(leading:constIcon(Icons.person,color:Colors.blue),title:constText(个人资料),trailing:constIcon(Icons.arrow_forward_ios,size:16,color:Colors.grey),onTap:(){},),constDivider(height:1),ListTile(leading:constIcon(Icons.notifications,color:Colors.blue),title:constText(消息通知),trailing:Switch(value:true,onChanged:(value){},),),constDivider(height:1),ListTile(leading:constIcon(Icons.fitbit,color:Colors.blue),title:constText(健康目标设置),trailing:constIcon(Icons.arrow_forward_ios,size:16,color:Colors.grey),onTap:(){},),constDivider(height:1),ListTile(leading:constIcon(Icons.help_center,color:Colors.blue),title:constText(帮助与反馈),trailing:constIcon(Icons.arrow_forward_ios,size:16,color:Colors.grey),onTap:(){},),constDivider(height:1),ListTile(leading:constIcon(Icons.info,color:Colors.blue),title:constText(关于我们),trailing:constIcon(Icons.arrow_forward_ios,size:16,color:Colors.grey),onTap:(){},),],),);}}三、一键运行OpenHarmony模拟器3.1 运行步骤打开Android Studio加载项目根目录在终端执行依赖安装flutter pub get打开DevEco Studio选择项目中的 ohos文件夹在DevEco中创建并启动 OpenHarmony手机模拟器点击顶部工具栏 ▶️ 运行按钮等待编译完成健康管家App自动安装启动四、常见问题DevEco打开ohos目录找不到设备检查OH SDK版本是否匹配确认模拟器已正常启动执行Build-Clean Project后重试检查Flutter OH环境是否完整配置总结Flutter for OpenHarmony 是目前开源鸿蒙跨平台开发中入门成本最低、落地最快的方案之一。尤其适合健康、工具、电商、教育类UI密集型应用。本文这套健康管家框架已经完全具备上线Demo基础代码干净、无冗余、无报错复制即用运行即通非常适合新手快速上手Flutter鸿蒙开发。