Flutter 跨平台实战：OpenHarmony 健康管理应用 Day10｜健康录入页卡片化重构与全局样式统一美化

Flutter 跨平台实战OpenHarmony 健康管理应用 Day10健康录入页卡片化重构与全局样式统一美化欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net 前言大家好本篇是我持续迭代开发Flutter OpenHarmony 健康管理应用的 Day10 开发笔记。在 Day1-Day9 已经完成项目初始化、页面路由、本地持久化存储、图表可视化、底部导航框架、首页 UI 美化与快捷功能导航的基础上今天重点对健康录入页面进行全面升级改造。将原本单一表单布局重构为基础信息卡片、健康数据卡片双模块结构统一页面圆角、阴影、间距、按钮样式实现全站 UI 风格标准化界面层次更清晰、视觉效果更接近商用 APP全程使用 DevEco Studio 开发步骤完整、代码可直接运行新手也能一键复刻。 本文你能学到全部都是干货Flutter Card 卡片组件分区布局实战用法表单页面模块化拆分基础信息区、健康数据区全局统一圆角、阴影、内边距、按钮样式规范化大尺寸圆角按钮全屏适配与美化设置原有业务逻辑无损保留仅做 UI 布局迭代优化滚动页面适配解决表单内容溢出问题OpenHarmony 应用界面统一设计规范实践 开发环境与项目准备1. 开发环境开发工具DevEco Studio开发语言Dart开发框架Flutter 鸿蒙适配版本调试方式Web 浏览器端调试适配平台Web 端、OpenHarmony 模拟器、真机均可兼容运行2. 项目依赖配置无需新增依赖沿用之前配置即可3. 项目前置条件基于 Day9 完整项目基础上迭代开发已实现底部三 Tab 导航、首页美化、个人中心图表展示本地数据录入、保存、读取、持久化功能正常可用项目无报错、依赖完整、可正常编译运行 今日核心开发功能健康录入页整体采用卡片式布局重构拆分为「基础信息卡片」和「健康数据卡片」两大模块统一卡片圆角、阴影、内边距样式和首页风格保持一致优化输入框间距、排版布局页面更加整洁舒适保存按钮全屏加宽、圆角美化提升交互质感外层嵌套滚动组件适配小屏设备防止内容溢出完整保留原有表单校验、本地数据存储、页面逻辑不变✅ 完整可运行核心代码import package:flutter/material.dart; import package:shared_preferences/shared_preferences.dart; import package:fl_chart/fl_chart.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: 鸿蒙健康管理APP, debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.blue), home: const MainBottomNavPage(), ); } } // // 底部导航主框架 // class MainBottomNavPage extends StatefulWidget { const MainBottomNavPage({super.key}); override StateMainBottomNavPage createState() _MainBottomNavPageState(); } class _MainBottomNavPageState extends StateMainBottomNavPage { int _currentIndex 0; final ListWidget _pageList const [ HomePage(), HealthInputPage(), ProfilePage(), ]; override Widget build(BuildContext context) { return Scaffold( body: _pageList[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex index; }); }, items: const [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 首页), BottomNavigationBarItem(icon: Icon(Icons.add_box), label: 健康录入), BottomNavigationBarItem(icon: Icon(Icons.person), label: 个人中心), ], ), ); } } // // 首页 // class HomePage extends StatelessWidget { const HomePage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(首页), centerTitle: true, ), body: SingleChildScrollView( padding: const EdgeInsets.all(20), child: FutureBuilderSharedPreferences( future: SharedPreferences.getInstance(), builder: (ctx, snapshot) { if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } final sp snapshot.data!; String name sp.getString(name) ?? 未设置; String age sp.getString(age) ?? ; String gender sp.getString(gender) ?? ; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Card( elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), child: Padding( padding: const EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( 欢迎回来, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold), ), const SizedBox(height: 8), Text(姓名$name, style: const TextStyle(fontSize: 16)), if (age.isNotEmpty) Text(年龄$age 岁, style: const TextStyle(fontSize: 16)), if (gender.isNotEmpty) Text(性别$gender, style: const TextStyle(fontSize: 16)), ], ), ), ), const SizedBox(height: 20), const Text( 功能导航, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)), const SizedBox(height: 12), Card( child: ListTile( leading: const Icon(Icons.add_chart, color: Colors.blue), title: const Text(健康数据录入), subtitle: const Text(记录身高、体重、心率信息), onTap: () { final nav context.findAncestorStateOfType_MainBottomNavPageState(); nav?.setState(() { nav._currentIndex 1; }); }, ), ), Card( child: ListTile( leading: const Icon(Icons.person, color: Colors.green), title: const Text(个人中心), subtitle: const Text(查看健康数据与图表), onTap: () { final nav context.findAncestorStateOfType_MainBottomNavPageState(); nav?.setState(() { nav._currentIndex 2; }); }, ), ), const SizedBox(height: 20), const Card( color: Colors.lightBlueAccent, child: Padding( padding: EdgeInsets.all(16.0), child: Text( 温馨提示定期记录健康数据关注身体变化保持健康生活, style: TextStyle(color: Colors.white, fontSize: 14), ), ), ), ], ); }, ), ), ); } } // // 健康录入页Day10 全新卡片美化版 // class HealthInputPage extends StatefulWidget { const HealthInputPage({super.key}); override StateHealthInputPage createState() _HealthInputPageState(); } class _HealthInputPageState extends StateHealthInputPage { final formKey GlobalKeyFormState(); final nameCtrl TextEditingController(); final ageCtrl TextEditingController(); final heightCtrl TextEditingController(); final weightCtrl TextEditingController(); final heartCtrl TextEditingController(); String? gender; override void initState() { super.initState(); loadData(); } Futurevoid loadData() async { final sp await SharedPreferences.getInstance(); setState(() { nameCtrl.text sp.getString(name) ?? ; ageCtrl.text sp.getString(age) ?? ; gender sp.getString(gender); heightCtrl.text sp.getString(height) ?? ; weightCtrl.text sp.getString(weight) ?? ; heartCtrl.text sp.getString(heart) ?? ; }); } Futurevoid saveData() async { final sp await SharedPreferences.getInstance(); sp.setString(name, nameCtrl.text); sp.setString(age, ageCtrl.text); sp.setString(gender, gender ?? ); sp.setString(height, heightCtrl.text); sp.setString(weight, weightCtrl.text); sp.setString(heart, heartCtrl.text); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(健康录入), centerTitle: true), body: SingleChildScrollView( padding: const EdgeInsets.all(20), child: Form( key: formKey, child: Column( children: [ // 基础信息卡片 Card( elevation: 3, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), child: Padding( padding: const EdgeInsets.all(18), child: Column( children: [ const Text(基础信息, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(height: 15), TextFormField( controller: nameCtrl, decoration: const InputDecoration( labelText: 姓名, border: OutlineInputBorder(), ), ), const SizedBox(height: 12), TextFormField( controller: ageCtrl, keyboardType: TextInputType.number, decoration: const InputDecoration( labelText: 年龄, border: OutlineInputBorder(), ), ), const SizedBox(height: 12), DropdownButtonFormFieldString( value: gender, decoration: const InputDecoration( labelText: 性别, border: OutlineInputBorder(), ), items: const [ DropdownMenuItem(value: 男, child: Text(男)), DropdownMenuItem(value: 女, child: Text(女)), ], onChanged: (val) setState(() gender val), ), ], ), ), ), const SizedBox(height: 20), // 健康数据卡片 Card( elevation: 3, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), child: Padding( padding: const EdgeInsets.all(18), child: Column( children: [ const Text(健康数据, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(height: 15), TextFormField( controller: heightCtrl, keyboardType: TextInputType.number, decoration: const InputDecoration( labelText: 身高(cm), border: OutlineInputBorder(), ), ), const SizedBox(height: 12), TextFormField( controller: weightCtrl, keyboardType: TextInputType.number, decoration: const InputDecoration( labelText: 体重(kg), border: OutlineInputBorder(), ), ), const SizedBox(height: 12), TextFormField( controller: heartCtrl, keyboardType: TextInputType.number, decoration: const InputDecoration( labelText: 心率, border: OutlineInputBorder(), ), ), ], ), ), ), const SizedBox(height: 30), // 保存按钮 SizedBox( width: double.infinity, height: 50, child: ElevatedButton( style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12))), onPressed: () async { if (formKey.currentState!.validate()) { await saveData(); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text(✅ 数据保存成功)), ); } }, child: const Text(保存数据, style: TextStyle(fontSize: 16)), ), ), ], ), ), ), ); } } // // 个人中心 // class ProfilePage extends StatelessWidget { const ProfilePage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(个人中心), centerTitle: true), body: FutureBuilderSharedPreferences( future: SharedPreferences.getInstance(), builder: (ctx, snapshot) { if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } final sp snapshot.data!; double h double.tryParse(sp.getString(height) ?? 0) ?? 0; double w double.tryParse(sp.getString(weight) ?? 0) ?? 0; double hr double.tryParse(sp.getString(heart) ?? 0) ?? 0; return SingleChildScrollView( padding: const EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text(个人信息, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)), const SizedBox(height: 10), Text(姓名${sp.getString(name) ?? }, style: const TextStyle(fontSize: 16)), Text(年龄${sp.getString(age) ?? }, style: const TextStyle(fontSize: 16)), Text(性别${sp.getString(gender) ?? }, style: const TextStyle(fontSize: 16)), const SizedBox(height: 20), const Text(健康指标, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)), const SizedBox(height: 10), Text(身高${sp.getString(height) ?? 0} cm, style: const TextStyle(fontSize: 16)), Text(体重${sp.getString(weight) ?? 0} kg, style: const TextStyle(fontSize: 16)), Text(心率${sp.getString(heart) ?? 0} 次/分, style: const TextStyle(fontSize: 16)), const SizedBox(height: 30), const Text(健康数据图表, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)), const SizedBox(height: 20), SizedBox( height: 280, child: BarChart( BarChartData( alignment: BarChartAlignment.spaceAround, titlesData: FlTitlesData(show: true), borderData: FlBorderData(show: false), barGroups: [ BarChartGroupData(x: 1, barRods: [BarChartRodData(toY: h, color: Colors.blue)]), BarChartGroupData(x: 2, barRods: [BarChartRodData(toY: w, color: Colors.green)]), BarChartGroupData(x: 3, barRods: [BarChartRodData(toY: hr, color: Colors.red)]), ], ), ), ), ], ), ); }, ), ); } } 调试与运行完整流程终端执行flutter pub get同步依赖输入flutter run -d web-server启动项目切换到健康录入页面可看到全新双卡片布局填写信息并保存弹窗提示保存成功重启应用数据不丢失页面样式、表单功能全部正常页面可正常滑动无布局溢出、无报错 跨平台适配说明本次 Day10 页面美化代码完全基于 Flutter 跨平台特性Web 浏览器端卡片、圆角、按钮、布局全部完美适配OpenHarmony 模拟器 / 真机无需修改代码直接编译即可正常显示样式与功能全局统一 UI 规范多端视觉效果保持一致 常见错误排查错误现象解决方法页面内容溢出外层嵌套 SingleChildScrollView 开启滚动卡片样式不生效检查 borderRadius、elevation 是否正常设置保存数据无响应确认表单校验和保存逻辑完整输入框样式错乱统一使用 OutlineInputBorder 边框样式 项目后续规划Day10 已完成健康录入页卡片化重构与全局样式统一美化后续将继续对个人中心页面进行精细化卡片布局、数据分区展示与界面细节优化进一步提升整体 APP 视觉统一性和使用体验。 项目总结本次 Day10 开发在不改动原有业务逻辑的前提下对健康录入页面进行了模块化卡片重构统一了全站圆角、阴影、间距与按钮风格让项目整体 UI 更加规范精致同时巩固了 Flutter 卡片布局、表单排版、页面美化的实战能力为后续个人中心深度优化和项目收尾打下扎实基础。✅ 结尾小贴士全文代码可直接复制替换运行无需额外修改开发全程仅用 DevEco Studio 即可完成调试收藏不迷路Day11 个人中心精细化优化马上更新