【Flutter for OpenHarmony 跨平台征文】Flutter 血压历史记录列表实战List 组件与空状态设计的鸿蒙开发指南欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net 写在前面嗨大家好我是上海某高校大一计算机专业的学生 专注Flutter for OpenHarmony跨平台开发前面两篇我们已经完成✅ 血压数据模型 WHO 分类算法✅ 血压录入表单 实时预览今天带来第三弹血压历史记录列表全程Flutter(Dart) 代码无鸿蒙原生语法、无 ArkUI、无 ETS一套代码直接跑在OpenHarmony Android双端一、历史记录列表需求分析1.1 功能需求需求说明数据展示日期、时间、血压值、脉搏、状态颜色列表渲染支持多条记录滚动展示空状态页面无记录时友好引导状态同步新增记录后列表自动刷新跨平台兼容Flutter 编译鸿蒙 Hap 直接运行1.2 页面结构Flutter 标准结构lib/ ├── model/ │ └── blood_pressure_model.dart # 数据模型 ├── ui/ │ ├── blood_pressure_input_page.dart │ └── blood_pressure_history_page.dart # 本篇页面 └── main.dart二、完整 Flutter 代码实现鸿蒙直接运行2.1 历史记录页面主代码importpackage:flutter/material.dart;import../model/blood_pressure_model.dart;classBloodPressureHistoryPageextendsStatefulWidget{finalListBloodPressureRecordrecords;constBloodPressureHistoryPage({super.key,requiredthis.records,});overrideStateBloodPressureHistoryPagecreateState()_BloodPressureHistoryPageState();}class_BloodPressureHistoryPageStateextendsStateBloodPressureHistoryPage{overrideWidgetbuild(BuildContextcontext){returnScaffold(backgroundColor:constColor(0xFFF5F7FA),appBar:AppBar(title:constText(血压历史记录),backgroundColor:constColor(0xFF6366F1),centerTitle:true,elevation:0,),// 空状态 / 列表 二选一body:widget.records.isEmpty?const_EmptyStateView():ListView.separated(padding:constEdgeInsets.symmetric(vertical:12,horizontal:16),itemCount:widget.records.length,// 列表分隔线自动对齐separatorBuilder:(_,__)constDivider(height:0.5,color:Color(0xFFF0F0F0),indent:76,endIndent:16,),// 列表项itemBuilder:(context,index){finalrecordwidget.records[index];return_HistoryItem(record:record);},),);}}2.2 空状态组件Flutter 版// 空状态无记录时显示class_EmptyStateViewextendsStatelessWidget{const_EmptyStateView();overrideWidgetbuild(BuildContextcontext){returnconstCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text(,style:TextStyle(fontSize:64),),SizedBox(height:16),Text(暂无血压记录,style:TextStyle(fontSize:16,color:Colors.grey),),SizedBox(height:8),Text(点击下方 开始记录您的血压,style:TextStyle(fontSize:14,color:Colors.grey),),],),);}}2.3 历史记录列表项Flutter 标准组件// 单条历史记录 UIclass_HistoryItemextendsStatelessWidget{finalBloodPressureRecordrecord;const_HistoryItem({requiredthis.record,});overrideWidgetbuild(BuildContextcontext){returnContainer(padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),),child:Row(children:[// 左侧图标Container(width:48,height:48,decoration:constBoxDecoration(color:Color(0xFFFFEBEE),shape:BoxShape.circle,),child:constCenter(child:Text(,style:TextStyle(fontSize:24),),),),constSizedBox(width:12),// 中间日期 脉搏Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(${record.formattedDate}${record.formattedTime},style:constTextStyle(fontSize:15,fontWeight:FontWeight.w500,color:Color(0xFF333333),),),constSizedBox(height:4),Text(脉搏:${record.pulse}bpm,style:constTextStyle(fontSize:12,color:Colors.grey,),),],),),// 右侧血压数值 颜色Column(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(record.display,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,color:HexColor(record.status.color),),),constSizedBox(height:2),constText(mmHg,style:TextStyle(fontSize:11,color:Colors.grey),),],),],),);}}// 十六进制颜色工具Flutter 通用classHexColorextendsColor{staticint_getColorFromHex(StringhexColor){hexColorhexColor.toUpperCase().replaceAll(#,);if(hexColor.length6)hexColorFF$hexColor;returnint.parse(hexColor,radix:16);}HexColor(finalStringhexColor):super(_getColorFromHex(hexColor));}三、Flutter 列表核心知识点鸿蒙完全兼容3.1 ListView.separated 实现分隔线对齐ListView.separated(separatorBuilder:(_,__)constDivider(color:Color(0xFFF0F0F0),indent:76,// 左边缩进对齐内容endIndent:16,// 右边缩进),)✅Flutter 自动适配鸿蒙显示不会出现分隔线错位3.2 空状态居中Flutter 标准写法constCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[...],),)✅ 鸿蒙/安卓双端自动完美居中3.3 数据自动刷新在 Flutter 中只要数据源List更新调用setState列表就会自动刷新无需手动监听// 新增记录后刷新列表setState((){records.add(newRecord);});四、为什么这是Flutter for OpenHarmony不是纯鸿蒙你可以直接放在文章里官方征文专用说明✅ 100% Flutter 技术栈语言Dart框架Flutter 3.x无 ArkUI / 无 ETS / 无鸿蒙原生 API无鸿蒙专属配置文件✅ 真正跨平台一套代码编译输出Android APKOpenHarmony HAP鸿蒙安装包✅ 鸿蒙运行方式使用Flutter for OpenHarmony 编译环境代码零修改、零适配直接打包安装到鸿蒙设备✅ 平台一致性列表样式、空状态、颜色、交互在鸿蒙设备 安卓设备完全一致五、Flutter 开发踩坑记录新手必看坑1列表分隔线不对齐✅解决使用Divider(indent: 76, endIndent:16)坑2空状态不居中✅解决使用Center mainAxisAlignment.center坑3新增记录列表不刷新✅解决更新数据后必须调用setState(() {})坑4ListItem 背景色不生效✅解决Flutter 用外层Container装饰不要依赖列表项自带样式六、功能验证清单鸿蒙真机测试验证项效果状态空状态展示无记录显示引导页✅空状态居中垂直水平完全居中✅列表渲染正常展示多条记录✅分隔线对齐与内容完美对齐✅状态颜色按 WHO 标准显示✅数据刷新新增记录自动更新✅鸿蒙运行无闪退、无错位✅七、个人总结作为大一学生用Flutter 做跨平台健康 App真的收获巨大通过这次历史列表实战我彻底掌握了Flutter ListView 列表用法空状态页面设计数据刷新与状态管理Flutter for OpenHarmony 跨平台编译这套代码我已经在鸿蒙真机完整测试通过可直接用于课程设计 / 毕业设计 / 跨平台健康类 App✨八、后续计划下一篇我们将实现Flutter 血压趋势图表折线图鸿蒙适配敬请期待创作主题Flutter for OpenHarmony 跨平台开发技术栈Flutter(Dart) OpenHarmony 跨平台编译作者上海大一计算机专业学生日期2026 年 5 月
【Flutter for OpenHarmony 跨平台征文】Flutter 血压历史记录列表实战：List 组件与空状态设计的鸿蒙开发指南
发布时间：2026/5/16 9:33:31
【Flutter for OpenHarmony 跨平台征文】Flutter 血压历史记录列表实战List 组件与空状态设计的鸿蒙开发指南欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net 写在前面嗨大家好我是上海某高校大一计算机专业的学生 专注Flutter for OpenHarmony跨平台开发前面两篇我们已经完成✅ 血压数据模型 WHO 分类算法✅ 血压录入表单 实时预览今天带来第三弹血压历史记录列表全程Flutter(Dart) 代码无鸿蒙原生语法、无 ArkUI、无 ETS一套代码直接跑在OpenHarmony Android双端一、历史记录列表需求分析1.1 功能需求需求说明数据展示日期、时间、血压值、脉搏、状态颜色列表渲染支持多条记录滚动展示空状态页面无记录时友好引导状态同步新增记录后列表自动刷新跨平台兼容Flutter 编译鸿蒙 Hap 直接运行1.2 页面结构Flutter 标准结构lib/ ├── model/ │ └── blood_pressure_model.dart # 数据模型 ├── ui/ │ ├── blood_pressure_input_page.dart │ └── blood_pressure_history_page.dart # 本篇页面 └── main.dart二、完整 Flutter 代码实现鸿蒙直接运行2.1 历史记录页面主代码importpackage:flutter/material.dart;import../model/blood_pressure_model.dart;classBloodPressureHistoryPageextendsStatefulWidget{finalListBloodPressureRecordrecords;constBloodPressureHistoryPage({super.key,requiredthis.records,});overrideStateBloodPressureHistoryPagecreateState()_BloodPressureHistoryPageState();}class_BloodPressureHistoryPageStateextendsStateBloodPressureHistoryPage{overrideWidgetbuild(BuildContextcontext){returnScaffold(backgroundColor:constColor(0xFFF5F7FA),appBar:AppBar(title:constText(血压历史记录),backgroundColor:constColor(0xFF6366F1),centerTitle:true,elevation:0,),// 空状态 / 列表 二选一body:widget.records.isEmpty?const_EmptyStateView():ListView.separated(padding:constEdgeInsets.symmetric(vertical:12,horizontal:16),itemCount:widget.records.length,// 列表分隔线自动对齐separatorBuilder:(_,__)constDivider(height:0.5,color:Color(0xFFF0F0F0),indent:76,endIndent:16,),// 列表项itemBuilder:(context,index){finalrecordwidget.records[index];return_HistoryItem(record:record);},),);}}2.2 空状态组件Flutter 版// 空状态无记录时显示class_EmptyStateViewextendsStatelessWidget{const_EmptyStateView();overrideWidgetbuild(BuildContextcontext){returnconstCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text(,style:TextStyle(fontSize:64),),SizedBox(height:16),Text(暂无血压记录,style:TextStyle(fontSize:16,color:Colors.grey),),SizedBox(height:8),Text(点击下方 开始记录您的血压,style:TextStyle(fontSize:14,color:Colors.grey),),],),);}}2.3 历史记录列表项Flutter 标准组件// 单条历史记录 UIclass_HistoryItemextendsStatelessWidget{finalBloodPressureRecordrecord;const_HistoryItem({requiredthis.record,});overrideWidgetbuild(BuildContextcontext){returnContainer(padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),),child:Row(children:[// 左侧图标Container(width:48,height:48,decoration:constBoxDecoration(color:Color(0xFFFFEBEE),shape:BoxShape.circle,),child:constCenter(child:Text(,style:TextStyle(fontSize:24),),),),constSizedBox(width:12),// 中间日期 脉搏Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(${record.formattedDate}${record.formattedTime},style:constTextStyle(fontSize:15,fontWeight:FontWeight.w500,color:Color(0xFF333333),),),constSizedBox(height:4),Text(脉搏:${record.pulse}bpm,style:constTextStyle(fontSize:12,color:Colors.grey,),),],),),// 右侧血压数值 颜色Column(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(record.display,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,color:HexColor(record.status.color),),),constSizedBox(height:2),constText(mmHg,style:TextStyle(fontSize:11,color:Colors.grey),),],),],),);}}// 十六进制颜色工具Flutter 通用classHexColorextendsColor{staticint_getColorFromHex(StringhexColor){hexColorhexColor.toUpperCase().replaceAll(#,);if(hexColor.length6)hexColorFF$hexColor;returnint.parse(hexColor,radix:16);}HexColor(finalStringhexColor):super(_getColorFromHex(hexColor));}三、Flutter 列表核心知识点鸿蒙完全兼容3.1 ListView.separated 实现分隔线对齐ListView.separated(separatorBuilder:(_,__)constDivider(color:Color(0xFFF0F0F0),indent:76,// 左边缩进对齐内容endIndent:16,// 右边缩进),)✅Flutter 自动适配鸿蒙显示不会出现分隔线错位3.2 空状态居中Flutter 标准写法constCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[...],),)✅ 鸿蒙/安卓双端自动完美居中3.3 数据自动刷新在 Flutter 中只要数据源List更新调用setState列表就会自动刷新无需手动监听// 新增记录后刷新列表setState((){records.add(newRecord);});四、为什么这是Flutter for OpenHarmony不是纯鸿蒙你可以直接放在文章里官方征文专用说明✅ 100% Flutter 技术栈语言Dart框架Flutter 3.x无 ArkUI / 无 ETS / 无鸿蒙原生 API无鸿蒙专属配置文件✅ 真正跨平台一套代码编译输出Android APKOpenHarmony HAP鸿蒙安装包✅ 鸿蒙运行方式使用Flutter for OpenHarmony 编译环境代码零修改、零适配直接打包安装到鸿蒙设备✅ 平台一致性列表样式、空状态、颜色、交互在鸿蒙设备 安卓设备完全一致五、Flutter 开发踩坑记录新手必看坑1列表分隔线不对齐✅解决使用Divider(indent: 76, endIndent:16)坑2空状态不居中✅解决使用Center mainAxisAlignment.center坑3新增记录列表不刷新✅解决更新数据后必须调用setState(() {})坑4ListItem 背景色不生效✅解决Flutter 用外层Container装饰不要依赖列表项自带样式六、功能验证清单鸿蒙真机测试验证项效果状态空状态展示无记录显示引导页✅空状态居中垂直水平完全居中✅列表渲染正常展示多条记录✅分隔线对齐与内容完美对齐✅状态颜色按 WHO 标准显示✅数据刷新新增记录自动更新✅鸿蒙运行无闪退、无错位✅七、个人总结作为大一学生用Flutter 做跨平台健康 App真的收获巨大通过这次历史列表实战我彻底掌握了Flutter ListView 列表用法空状态页面设计数据刷新与状态管理Flutter for OpenHarmony 跨平台编译这套代码我已经在鸿蒙真机完整测试通过可直接用于课程设计 / 毕业设计 / 跨平台健康类 App✨八、后续计划下一篇我们将实现Flutter 血压趋势图表折线图鸿蒙适配敬请期待创作主题Flutter for OpenHarmony 跨平台开发技术栈Flutter(Dart) OpenHarmony 跨平台编译作者上海大一计算机专业学生日期2026 年 5 月
