Flutter 跨平台实战：OpenHarmony 健康管理应用 Day2｜底部导航栏 + 三页面框架搭建-编程阁

🎯 Flutter 跨平台实战：OpenHarmony 健康管理应用 Day2｜底部导航栏 + 三页面框架搭建

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

🚀 前言

大家好，本篇是Flutter + OpenHarmony 健康管理应用开发系列的第二篇笔记。在 Day1 完成项目初始化与鸿蒙环境配置的基础上，今天我们正式搭建 APP 核心框架，实现底部导航栏与三大主页面（首页、健康录入、个人中心）的搭建，完成页面自由切换交互，让项目具备完整的多页面应用结构，为后续健康数据录入、本地存储等功能开发奠定坚实基础。全程使用 DevEco Studio 开发，步骤完整、代码可直接运行，适合课程实训、项目作业自查提交，新手也能一键复刻。

💥 本文你能学到

Flutter 底部导航组件BottomNavigationBar标准用法
多页面切换逻辑与状态管理实现
三大页面（首页 / 健康录入 / 个人中心）框架搭建
鸿蒙设备界面渲染与交互调试
Flutter 多页面应用标准结构编写

🥝 开发环境

1. 环境信息

开发工具：DevEco Studio
开发语言：Dart
开发框架：Flutter
调试设备：OpenHarmony 手机模拟器
适配平台：OpenHarmony

2. 依赖配置

本阶段无需引入第三方依赖，保持 Day1 的默认配置即可，pubspec.yaml无需任何修改：

dependencies: flutter: sdk: flutter

📝 今日核心开发功能

实现底部导航栏（首页、健康录入、个人中心）
搭建三个空白页面框架
实现点击切换页面功能
鸿蒙端运行、调试、截图验证

✅ 完整可运行核心代码

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: '鸿蒙健康管理', debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.blue), home: const MainPage(), ); } } // 主页面：底部导航 + 页面切换 class MainPage extends StatefulWidget { const MainPage({super.key}); @override State<MainPage> createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { int _currentIndex = 0; final List<Widget> _pages = const [ HomePage(), HealthInputPage(), ProfilePage(), ]; void _onItemTapped(int index) { setState(() { _currentIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( body: _pages[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: _onItemTapped, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: "首页", ), BottomNavigationBarItem( icon: Icon(Icons.add_chart), 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("首页")), body: const Center( child: Text("欢迎使用健康管理应用", style: TextStyle(fontSize: 18)), ), ); } } // 健康数据录入页面 class HealthInputPage extends StatelessWidget { const HealthInputPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("健康录入")), body: const Center( child: 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("个人中心")), body: const Center( child: Text("个人信息展示区域", style: TextStyle(fontSize: 16)), ), ); } }

📱 调试与运行完整步骤

停止 Day1 项目运行
打开项目lib/main.dart，修改代码（上方有完整代码）
终端执行命令同步依赖（可选，因无新依赖）
```
flutter pub get
```
执行运行命令，选择 OpenHarmony 模拟器设备
```
flutter run
```
等待编译完成，测试底部导航切换功能，确认三个页面均可正常显示、无报错闪退

🔐 跨平台适配说明

本次开发严格遵循 Flutter 跨平台开发规范，针对 OpenHarmony 系统完成专属适配：

底部导航栏使用 Flutter 原生组件，自动适配鸿蒙系统样式，无布局错乱
三个页面渲染流畅，无卡顿、无错位，点击交互响应及时
无需修改原生代码，一次编写，鸿蒙模拟器直接运行，适配性拉满

🧩 常见错误排查

错误现象	解决方法
导航栏不显示	检查`bottomNavigationBar`是否正确嵌套在 Scaffold 组件内，确保无语法错误
页面切换无效	确认`setState`方法已正确调用，成功更新`_currentIndex`索引值
鸿蒙端显示异常、编译失败	执行`flutter clean`清理项目缓存，重启模拟器后重新运行
页面无内容显示	检查子页面（HomePage 等）是否正确编写，确保无遗漏 Scaffold 或 Center 组件

🎨 项目后续规划

Day2 已完成 APP 核心框架搭建，后续将按以下节奏逐步开发：

Day3：健康数据录入表单开发，实现姓名、年龄、体重、心率等信息填写
Day4：本地数据持久化存储，实现健康数据的保存与读取功能
Day5+：数据可视化展示、页面 UI 美化、鸿蒙真机适配与项目打包

📌 项目总结

本篇笔记完整记录了基于 DevEco Studio 开发 Flutter 鸿蒙项目的 Day2 全过程，在 Day1 环境配置的基础上，完成了底部导航栏搭建、三大页面框架创建与页面切换功能实现。通过本次开发，熟练掌握了 Flutter 底部导航组件的使用方法、多页面状态管理逻辑，以及鸿蒙端的调试技巧，为后续健康管理完整功能开发提供了稳定的框架支撑。