【Flutter For OpenHarmony】打造TechHub社区App——底部导航架构与状态保持

在本文的实战中，我们将对工程进行架构升级，从单一的列表 Demo 蜕变为一个拥有“首页”、“资讯”、“工具”、“我的”四大核心模块的综合性技术社区 App ——例如：用户在“资讯”页浏览到了第 10 页，切换到“首页”再切回来时，资讯页会重新从第 1 页开始加载，这在实际应用中会影响用户体验。通过之前的实战，我们成功将一个单页面 Demo 升级为了具备标准 App 架构的。在接下来的阶段，我们将深

Betelgeuse76

549人浏览 · 2026-01-30 22:46:58

Betelgeuse76 · 2026-01-30 22:46:58 发布

导语

在完成了基础的环境搭建与网络列表功能开发后，我们的 my_first_ohos_app 工程已经具备了单页面应用的雏形。然而，一个成熟的商业级应用通常需要容纳更丰富的功能模块。

在本文的实战中，我们将对工程进行架构升级，从单一的列表 Demo 蜕变为一个拥有“首页”、“资讯”、“工具”、“我的”四大核心模块的综合性技术社区 App —— TechHub（技术驿站）。本次实战的核心技术点聚焦于应用骨架搭建、底部导航栏实现以及页面状态保持的解决方案。

一、应用架构重构：从 Demo 到 App

为了支撑多模块并行开发，首先需要对目录结构进行规范化重构。我们不再将所有逻辑堆砌在 main.dart 中，而是采用模块化的方式组织代码。

1. 目录结构规划

我们将 lib 目录下的结构进行了如下划分，确保每个页面的职责单一且清晰：

lib/
├── pages/
│   ├── home_page.dart      // 首页：展示 Banner 与 推荐内容
│   ├── post_list_page.dart // 资讯页：复用之前的网络列表功能
│   ├── tools_page.dart     // 工具页：效率工具集合
│   ├── profile_page.dart   // 个人主页：个人中心与设置
│   └── main_page.dart      // 主框架：管理底部导航与页面栈
├── providers/              // 状态管理层
└── main.dart               // 应用入口

这种结构不仅利于代码维护，也为后续的功能扩展打下了基础。

在这里插入图片描述

二、底部导航栏的实现

在 lib/pages/main_page.dart 中，我们构建了应用的顶级容器 MainPage。这是整个 App 的骨架，负责承载底部的 Tab 切换逻辑。

我们使用 Flutter 原生的 BottomNavigationBar 组件，定义了四个导航项：

bottomNavigationBar: NavigationBar(
  selectedIndex: _currentIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _currentIndex = index;
    });
  },
  destinations: const <Widget>[
    NavigationDestination(
      selectedIcon: Icon(Icons.home),
      icon: Icon(Icons.home_outlined),
      label: '首页',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.article),
      icon: Icon(Icons.article_outlined),
      label: '资讯',
    ),
    // ... 其他 Tab 配置
  ],
),

通过 setState 更新 _currentIndex，我们可以轻松实现 Tab 的点击切换效果。
在这里插入图片描述

三、页面状态保持 (State Preservation)

在传统的 body: _pages[_currentIndex] 写法中，存在一个严重的用户体验问题：当用户切换 Tab 时，页面会被销毁并重建。

例如：用户在“资讯”页浏览到了第 10 页，切换到“首页”再切回来时，资讯页会重新从第 1 页开始加载，这在实际应用中会影响用户体验。

解决方案：IndexedStack

为了解决这个问题，我们采用了 IndexedStack 组件来管理页面栈。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: IndexedStack(
      index: _currentIndex,
      children: _pages,
    ),
    bottomNavigationBar: NavigationBar(...),
  );
}

原理解析：
IndexedStack 会一次性初始化所有子组件，并将它们堆叠在一起。它通过改变子组件的层级顺序来显示当前页面，而不是销毁和重建。这意味着：

数据不丢失：列表的滚动位置、输入框的内容都会被保留。
性能优化：避免了频繁的网络请求和重绘开销。

四、入口文件适配

最后，我们需要修改 lib/main.dart，将应用的 home 属性指向新创建的 MainPage，正式启用新的 App 架构。

class MyApp extends StatelessWidget {
  // ...
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      // ...
      child: MaterialApp(
        title: 'TechHub',
        // ...
        home: const MainPage(), // 替换原来的 PostListPage
      ),
    );
  }
}