Flutter 跨平台实战：OpenHarmony 健康管理应用 Day9｜首页 UI 美化、个人信息展示与功能快捷导航

Flutter 跨平台实战OpenHarmony 健康管理应用 Day9首页 UI 美化、个人信息展示与功能快捷导航欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net 前言大家好本篇是我真实完成Flutter OpenHarmony 健康管理应用的 Day9 开发笔记基于 Day1-Day8 已经完成项目初始化、表单录入、页面路由、本地持久化存储、数据图表可视化、底部导航整体框架搭建等功能。今天主要对应用首页进行全面 UI 美化改造实现欢迎信息卡片展示、个人信息自动读取、功能快捷导航跳转、健康温馨提示面板整体采用卡片圆角 阴影布局页面层次更分明、界面更贴近商用 APP 风格全程只用 DevEco Studio 开发一步不漏、全部写细新手照着做就能一次成功我会把首页布局重构、卡片组件使用、异步读取本地数据、跨 Tab 快捷跳转、界面美化适配的全过程记录详细照着做就能掌握 Flutter 页面美化与模块化布局开发技巧。 本文你能学到全部都是干货Flutter Card 卡片圆角、阴影、内边距完整美化用法FutureBuilder 异步读取本地缓存数据并动态渲染 UI首页模块化拆分欢迎区、功能导航区、温馨提示区通过上下文查找导航状态实现首页点击快捷切换底部 Tab已有项目无损迭代美化保留之前所有业务功能多组件组合排版、间距适配、页面滑动适配技巧OpenHarmony 跨平台 UI 统一美化适配规范 开发环境与项目准备1. 开发环境开发工具DevEco Studio全程仅使用这一个工具不使用其他编辑器开发语言Dart框架FlutterOpenHarmony 适配版本调试方式Web 浏览器端调试避开模拟器配置繁琐问题完整验证首页美化、数据展示与页面跳转功能后续适配OpenHarmony 模拟器及真机当前 UI 美化代码可直接兼容.hap打包发布2. 项目准备基于 Day8 已完成底部导航框架的项目无需新建工程直接在原有项目上迭代开发已完成三页面底部导航、健康数据录入、本地存储、图表展示功能项目依赖无缺失、可正常编译运行无需新增第三方依赖沿用已有依赖库即可保留原有工程目录与鸿蒙适配配置不破坏项目结构本项目全程基于 Flutter for OpenHarmony 开发后续继续迭代 UI 细节与功能扩展本篇为首页美化与快捷导航优化篇。 核心功能Day9 开发实现内容1. 功能说明本次 Day9 迭代开发完成以下核心内容首页全新 UI 重构采用卡片式布局界面整洁美观进入首页自动读取本地保存的姓名、年龄、性别并展示欢迎信息新增功能快捷导航卡片点击可直接跳转到健康录入、个人中心页面增加健康温馨提示面板提升 APP 人性化体验全部页面保留原有录入、存储、图表、导航切换所有功能适配页面滚动内容过多可正常滑动防止布局溢出样式统一美化圆角、阴影、间距规范统一2. 完整可运行核心代码lib/main.dartimport 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: 个人中心), ], ), ); } } // // 首页Day9 美化版 // 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), ), ), ), ], ); }, ), ), ); } } // // 健康录入页面 // 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: Padding( padding: const EdgeInsets.all(20), child: SingleChildScrollView( child: Form( key: formKey, child: Column( children: [ 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: 12), 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), ElevatedButton( onPressed: () async { if (formKey.currentState!.validate()) { await saveData(); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text(数据保存成功)), ); } }, child: const Text(保存数据), ), ], ), ), ), ), ); } } // // 个人中心 // 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)]), ], ), ), ), ], ), ); }, ), ); } }3. 关键逻辑与加分点解析采用 FutureBuilder 异步获取本地存储避免页面卡顿与空白Card 组件统一设置圆角与阴影全局 UI 风格标准化首页拆分为欢迎模块、功能导航模块、温馨提示模块结构清晰通过上下文查找根导航状态实现无需路由直接切换底部 Tab所有原有录入、存储、图表、导航功能完全保留无功能丢失页面嵌套 SingleChildScrollView适配不同屏幕解决内容溢出未填写信息时做默认值处理界面不会出现空白异常文字 调试与运行完整流程终端执行flutter pub get确保依赖正常加载输入flutter run -d web-server启动项目进入首页自动加载本地个人信息并展示欢迎卡片点击功能导航卡片可直接跳转到对应页面进入健康录入填写数据保存首页信息自动同步更新重启应用数据不丢失首页 UI、跳转、图表全部正常页面滑动流畅卡片样式美观无报错无布局溢出 跨平台适配说明本次 Day9 首页美化代码基于 Flutter 跨平台特性一套代码多端兼容平台运行方式适配说明Chrome 浏览器端flutter run -d web-server首页卡片、文字排版、跳转功能全部正常适配OpenHarmony 模拟器 / 真机编译生成.hapUI 样式、卡片圆角阴影、布局排版原生适配无需额外修改代码即可打包发布 超全错误排查与解决方案错误场景解决方案首页一直转圈不显示内容检查是否正常初始化 SharedPreferences网络调试模式依赖加载完整点击功能卡片无反应确认查找的导航状态类名和页面类名完全一致页面内容溢出报错给外层嵌套 SingleChildScrollView 开启滚动适配文字排版错乱统一设置 padding、SizedBox 间距保持布局规范 项目后续规划Day9 已完成首页 UI 全面美化、个人信息动态展示与功能快捷导航开发后续将继续迭代完善个人中心功能扩展、全局主题样式统一、页面细节优化等内容让整体应用更加精致完整。 项目总结本篇完整记录了 Day9 对健康管理 APP 首页进行 UI 重构与美化的全过程熟练使用 Card 卡片布局、FutureBuilder 异步数据加载、页面内跨 Tab 跳转等实用技巧在完全保留历史所有功能的前提下大幅提升 APP 界面颜值和交互体验项目结构更加模块化为后续更多功能扩展和界面优化打下良好基础。✅ 结尾小贴士全篇代码可直接复制替换运行无需额外修改全程使用 DevEco Studio 即可完成开发调试无需切换其他编辑器点赞收藏不迷路后续每日开发笔记持续更新