🚀 开源鸿蒙跨平台升级：Flutter dio 适配 + 底部 Tab 导航完整实战

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

前言
哈喽～我是计算机专业大一新生😆 这次在前文dio 三方库鸿蒙化适配的基础上，对应用做了一次核心功能升级，新增了底部 Tab 导航栏，完整搭建了「首页、发现、消息、我的」四大页面，让应用从一个简单列表，变成结构完整、交互更丰富的鸿蒙跨平台 APP。
全程使用 OpenHarmony 官方兼容库，代码不复杂、逻辑清晰，所有功能均在鸿蒙虚拟机完成运行验证，非常适合课程作业 & CSDN 博客～

📦 前置环境准备

本文基于以下环境，全程可复现：
1.DevEco Studio 4.0 Release 及以上
2.适配 OpenHarmony 的 Flutter SDK 3.16+
3.OpenHarmony 3.2+ 虚拟主机（模拟器）
4.已完成 dio 鸿蒙化适配的基础项目

🎯 本次升级目标

1.为应用增加底部 Tab 导航栏，实现四大页面自由切换
2.保留首页的dio 网络请求、下拉刷新、上拉加载能力
3.实现页面状态保活，切换 Tab 不重建、不丢数据
4.新增「发现、消息、我的」三个完整页面
5.统一紫色主题风格，界面更美观
6.所有功能必须在鸿蒙虚拟机上运行验证

💡 核心功能实现

1. 底部 Tab 导航（状态保活版）
使用BottomNavigationBar+IndexedStack，保证切换页面时不重建、不刷新，体验丝滑。
关键代码结构：

class MainTabPage extends StatefulWidget {
  const MainTabPage({super.key});

  @override
  State<MainTabPage> createState() => _MainTabPageState();
}

class _MainTabPageState extends State<MainTabPage> {
  int _currentIndex = 0;

  final List<Widget> _pages = const [
    HomePage(),
    DiscoverPage(),
    MessagePage(),
    MinePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (i) => setState(() => _currentIndex = i),
        selectedItemColor: const Color(0xFF6C63FF),
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: "发现"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

2. 四大页面功能简介

🏠 首页（保留 dio 鸿蒙化能力）
文章列表卡片展示
dio 网络请求 + JSON 解析
下拉刷新、上拉加载
加载中 / 加载失败提示
混入AutomaticKeepAliveClientMixin保活，切换不丢滚动位置

🔍 发现页
搜索框样式布局
8 个功能入口卡片：
开源项目、技术文章、技术活动、学习教程
招聘信息、技术问答、热门推荐、最新动态
彩色小图标 + 网格布局，美观清晰

💬 消息页
消息列表展示
未读消息小红点🔴
消息时间、标题、内容结构完整
点击可后续扩展跳转详情

👤 我的页
用户头像 + 昵称展示
关注、粉丝、获赞数据统计
功能菜单：我的收藏、历史、点赞、设置等
整体风格统一，结构接近真实 APP

⚙️ 鸿蒙适配关键要点

1.dio 网络权限配置
打开ohos/entry/src/main/module.json5，确保已添加网络权限：

{
  "name": "ohos.permission.INTERNET",
  "reason": "应用需要访问网络完成接口请求",
  "usedScene": {"abilities": ["EntryAbility"], "when": "inuse"}
}

2.页面状态保活
首页混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true，切换 Tab 不重建。

3.版本兼容
所有组件均来自 OpenHarmony 兼容清单，dio 推荐 5.4.0+、鸿蒙 SDK API9+。

📱 鸿蒙虚拟机运行验证
所有功能均在 OpenHarmony 虚拟主机完成运行验证：

❌ 常见问题排查

✨ 学习总结

作为大一新生，通过这次升级，我真正体会到了一个完整 APP 的结构是什么样的，也学会了：
1.底部导航栏的实现方式
2.多页面管理与状态保持
3.简单的界面布局与样式规范
4.Flutter 项目在鸿蒙上的完整构建运行流程