Flutter for OpenHarmony实战DAY2从零搭建健康管家App之集成 fl_chart 图表 实现步数 心率 睡眠趋势曲线图欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net前言在做 Flutter 开源鸿蒙健康类 App 开发时单纯文字列表展示健康数据过于单调没有数据可视化效果。本文基于Flutter for OpenHarmony 健康管家项目集成目前最常用的 fl_chart 图表库一次性实现近 7 日步数柱状图近 7 日心率折线图近 7 日睡眠时长平滑曲线图数据列表汇总展示一、项目环境与依赖引入1.1 开发环境Android Studio编写 Flutter 业务代码DevEco Studio打开 ohos 目录编译运行鸿蒙模拟器Flutter OH 适配版 SDKOpenHarmony SDK 4.0.01.2 引入图表依赖打开项目根目录 pubspec.yaml添加图表库依赖dependencies:flutter:sdk:flutter # 主流Flutter图表库 支持折线图/柱状图/曲线图 fl_chart:^0.65.0保存后终端执行依赖安装flutter pub get二、整体功能说明本次新增数据统计页核心功能柱状图展示一周每日步数趋势折线图展示每日静息心率变化平滑曲线展示每日睡眠时长趋势支持图表点击触摸查看数值下方附带完整每日健康数据明细列表全页面适配鸿蒙、无布局溢出、兼容 Material3三、完整核心源码3.1 替换 data_page.dart 完整代码importpackage:flutter/material.dart;importpackage:fl_chart/fl_chart.dart;/// 数据统计页面集成fl_chart实现步数、心率、睡眠趋势图表class DataPage extends StatelessWidget{constDataPage({super.key});/// 模拟近7天健康数据步数、心率、睡眠时长final ListMapString,dynamicweekHealthDataconst[{day:周一,step:7230,heartRate:71,sleepTime:7.0},{day:周二,step:8950,heartRate:69,sleepTime:7.2},{day:周三,step:6520,heartRate:73,sleepTime:6.5},{day:周四,step:9180,heartRate:70,sleepTime:7.8},{day:周五,step:7860,heartRate:68,sleepTime:7.3},{day:周六,step:12500,heartRate:72,sleepTime:8.0},{day:周日,step:8672,heartRate:69,sleepTime:7.5},];override Widgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText(健康数据统计),centerTitle:true,),body:SingleChildScrollView(padding:constEdgeInsets.symmetric(horizontal:16,vertical:12),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[// 1. 近7天步数柱状图_buildChartTitle(近7天步数趋势),constSizedBox(height:10),_buildStepBarChart(),constSizedBox(height:30),// 2. 近7天心率折线图_buildChartTitle(近7天心率趋势),constSizedBox(height:10),_buildHeartRateLineChart(),constSizedBox(height:30),// 3. 近7天睡眠时长曲线图_buildChartTitle(近7天睡眠时长趋势),constSizedBox(height:10),_buildSleepCurveChart(),constSizedBox(height:30),// 4. 健康数据明细列表_buildChartTitle(每日健康明细),constSizedBox(height:10),_buildHealthDataList(),],),),);}/// 图表通用标题组件Widget_buildChartTitle(String title){returnText(title,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold,color:Colors.grey.shade800,),);}/// 构建步数柱状图Widget_buildStepBarChart(){returnSizedBox(height:220,child:BarChart(BarChartData(alignment:BarChartAlignment.spaceAround,maxY:14000,// 开启触摸交互barTouchData:BarTouchData(enabled:true),// 隐藏上下左右多余坐标轴文字titlesData:FlTitlesData(topTitles:AxisTitles(sideTitles:SideTitles(showTitles:false)),rightTitles:AxisTitles(sideTitles:SideTitles(showTitles:false)),leftTitles:AxisTitles(sideTitles:SideTitles:SideTitles(showTitles:false)),bottomTitles:AxisTitles(sideTitles:SideTitles(showTitles:true,getTitlesWidget:(value,meta){intindexvalue.toInt();returnText(weekHealthData[index][day]);},),),),// 柱状图数据组barGroups:weekHealthData.asMap().entries.map((item){returnBarChartGroupData(x:item.key,barRods:[BarChartRodData(toY:item.value[step].toDouble(),color:Colors.blueAccent,width:18,borderRadius:BorderRadius.circular(6),)],);}).toList(),),),);}/// 构建心率折线图Widget_buildHeartRateLineChart(){returnSizedBox(height:200,child:LineChart(LineChartData(minY:60,maxY:80,lineBarsData:[LineChartBarData(spots:weekHealthData.asMap().entries.map((item){returnFlSpot(item.key.toDouble(),item.value[heartRate].toDouble(),);}).toList(),isCurved:false,color:Colors.redAccent,barWidth:3,dotData:FlDotData(show:true),)],titlesData:FlTitlesData(topTitles:AxisTitles(sideTitles:SideTitles(showTitles:false)),rightTitles:AxisTitles(sideTitles:SideTitles(showTitles:false)),leftTitles:AxisTitles(sideTitles:SideTitles:SideTitles(showTitles:false)),bottomTitles:AxisTitles(sideTitles:SideTitles(showTitles:true,getTitlesWidget:(value,meta){returnText(weekHealthData[value.toInt()][day]);},),),),),),);}/// 构建睡眠时长平滑曲线图Widget_buildSleepCurveChart(){returnSizedBox(height:200,child:LineChart(LineChartData(minY:5,maxY:9,lineBarsData:[LineChartBarData(spots:weekHealthData.asMap().entries.map((item){returnFlSpot(item.key.toDouble(),item.value[sleepTime].toDouble(),);}).toList(),// 开启平滑曲线isCurved:true,color:Colors.purpleAccent,barWidth:3,dotData:FlDotData(show:true),)],titlesData:FlTitlesData(topTitles:AxisTitles(sideTitles:SideTitles(showTitles:false)),rightTitles:AxisTitles(sideTitles:SideTitles:SideTitles(showTitles:false)),leftTitles:AxisTitles(sideTitles:SideTitles:SideTitles(showTitles:false)),bottomTitles:AxisTitles(sideTitles:SideTitles(showTitles:true,getTitlesWidget:(value,meta){returnText(weekHealthData[value.toInt()][day]);},),),),),),);}/// 健康数据明细列表Widget_buildHealthDataList(){returnColumn(children:weekHealthData.map((item){returnListTile(leading:Container(width:45,height:45,decoration:BoxDecoration(color:Colors.blue.shade50,borderRadius:BorderRadius.circular(8),),child:Center(child:Text(item[day],style:TextStyle(fontWeight:FontWeight.w600,color:Colors.blue.shade700,),),),),title:Text(每日步数${item[step]} 步),subtitle:Text(心率${item[heartRate]} 次/分 睡眠${item[sleepTime]} h,),trailing:constIcon(Icons.arrow_forward_ios,size:14,color:Colors.grey),);}).toList(),);}}四、运行步骤在 pubspec.yaml 配置好 fl_chart 依赖执行flutter pub get替换项目中 pages/data_page.dart 为上面完整代码Android Studio 无需改动其他代码直接热重载DevEco Studio 启动鸿蒙模拟器运行项目进入数据统计页面即可看到三张趋势图表 明细列表五、功能亮点采用工业级 fl_chart 图表库适配 Flutter 全平台、兼容鸿蒙同时实现柱状图、折线图、平滑曲线图三种主流图表开启触摸交互点击图表可查看具体数值代码结构规范、封装公共组件页面滚动适配无布局溢出完美兼容 OpenHarmony 手机模拟器自带数据明细列表图文结合展示更专业六、常见问题解决依赖报错检查网络切换 Flutter 镜像源重新 flutter pub get图表不显示确认 fl_chart 版本兼容不要使用过高版本鸿蒙模拟器布局错乱已做自适应高度和滚动包裹直接运行即可