# Flutter for OpenHarmony实战DAY1：从零搭建健康管家App之开发全记录-酒店常州论坛

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 Studio
DevEco Studio NEXT
Flutter OH适配版SDK
OpenHarmony SDK
鸿蒙模拟器/真机

1.2 核心开发规则
标准协同流程

Android Studio 打开项目根目录 → 编写lib下Flutter业务代码，注意代码规范
DevEco Studio 打开项目中的 ohos目录，检查工程配置，确保Flutter与鸿蒙端适配正常
启动鸿蒙模拟器 → 点击运行按钮 → App直接启动，测试所有页面跳转和功能

二、项目核心完整代码
在lib文件夹下，新建 pages 文件夹，然后创建3个dart文件（home_page.dart、data_page.dart、setting_page.dart）

2.1 入口文件 main.dart

import'package:flutter/material.dart';import'pages/home_page.dart';import'pages/data_page.dart';import'pages/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 State<MainPage>createState()=>_MainPageState();}class _MainPageState extends State<MainPage>{int_currentIndex=0;// 列表里的页面必须是 const 构造器final List<Widget>_pages=const[HomePage(),DataPage(),SettingPage(),];@override Widgetbuild(BuildContext context){returnScaffold(body:_pages[_currentIndex],bottomNavigationBar:BottomNavigationBar(currentIndex:_currentIndex,onTap:(index){setState((){_currentIndex=index;});},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.dart

import'package:flutter/material.dart';class HomePage extends StatelessWidget{// 加上 const 构造器constHomePage({super.key});// 成员变量设为 const，避免报错final Map<String,dynamic>healthData=const{'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.dart

import'package:flutter/material.dart';class DataPage extends StatelessWidget{// 加上 const 构造器constDataPage({super.key});final List<Map<String,dynamic>>stepData=const[{'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 data=stepData[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.dart

import'package: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鸿蒙开发。

企业官网建设流程全解析