前言无论是在 Android、iOS 还是新兴的 HarmonyOS 平台上底部标签栏都是用户与应用核心功能进行交互的主要入口。它提供了一种清晰、直观的导航方式让用户可以轻松地在不同功能模块之间切换。在本文中将从一个只有独立页面的初始项目开始一步步地重构代码最终实现一个包含“首页”和“我的”两个核心模块的 TabBar 导航结构。目标我的目标是将一个通过路由进行离散页面跳转的应用改造成一个拥有固定底部导航栏的现代化应用。改造前应用有一个初始页面。所有页面如登录、个人中心通过Navigator.pushNamed等方法进行跳转彼此独立。没有一个统一的主导航结构。改造后我的目标应用底部有一个常驻的 TabBar包含“首页”和“我的”两个标签。点击不同的标签可以切换中间的主体内容区域而 TabBar 本身保持不变。页面切换流畅且状态能够被妥善管理。第一步分析初始代码main.dart(初始状态)import package:flutter/material.dart; import pages/home.dart; import pages/login.dart; import pages/profile.dart; import pages/couplet.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Flutter Demo, theme: ThemeData( /* ... Theme data ... */ ), initialRoute: /, routes: { /: (context) const HomePage(), /login: (context) const LoginPage(), /profile: (context) const ProfilePage(), /couplet: (context) const CoupletPage(), }, ); } }分析这段代码使用MaterialApp的routes属性定义了一组命名路由。应用的根路由/直接指向HomePage。这种方式非常适合那些需要从一个页面跳转到另一个全屏页面的场景例如从首页跳转到登录页。第二步核心概念 -Scaffold和StatefulWidget要实现 TabBar需要引入两个 Flutter 的核心概念ScaffoldWidget可以把它想象成一个“脚手架”它为构建符合 Material Design 规范的页面提供了一整套标准结构。它包含了appBar顶部应用栏、body主内容区、floatingActionButton浮动操作按钮以及这次的主角——bottomNavigationBar底部导航栏等预设插槽。StatefulWidget有状态组件我的 TabBar 需要“记住”当前哪个标签页被选中。当用户点击一个新标签时界面需要更新以显示对应的内容。这种需要根据用户交互或内部数据变化而改变自身外观的 Widget就是有状态组件。将使用它来保存和更新当前选中的 Tab 索引。第三步构建 TabBar 的容器 -tabs.dart最佳实践是将管理 TabBar 导航的逻辑封装在一个独立的 Widget 中。这有助于保持代码的整洁和可维护性。在lib/pages/目录下创建一个新文件tabs.dart并添加以下代码import package:flutter/material.dart; import home.dart; import profile.dart; // 创建一个有状态的 Widget 来管理我们的 Tabs class Tabs extends StatefulWidget { const Tabs({super.key}); override StateTabs createState() _TabsState(); } class _TabsState extends StateTabs { // 1. 定义一个变量来记录当前选中的 Tab 索引 int _currentIndex 0; // 2. 创建一个 Widget 列表用于存放我们想要切换的页面 final ListWidget _pages [ const HomePage(), // 首页 const ProfilePage(),// 个人中心页 ]; override Widget build(BuildContext context) { // 3. 使用 Scaffold 作为页面的根布局 return Scaffold( // 4. body 部分显示当前索引对应的页面 body: _pages[_currentIndex], // 5. 配置底部导航栏 bottomNavigationBar: BottomNavigationBar( // 6. 将当前索引绑定到 navigation bar currentIndex: _currentIndex, // 7. 定义点击事件当用户点击时更新状态 onTap: (index) { // 使用 setState 来通知 Flutter 框架状态已改变需要重新渲染 setState(() { _currentIndex index; }); }, // 当 item 数量大于 3 个时需要设置此属性以保证样式统一 type: BottomNavigationBarType.fixed, // 8. 定义导航栏中的项目 items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 首页, ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 我的, ), ], ), ); } }代码详解创建了一个名为Tabs的StatefulWidget。在_TabsState中_currentIndex是核心状态它决定了哪个页面应该被显示哪个标签应该被高亮。_pages列表将我的页面HomePage和ProfilePage与索引0 和 1对应起来。Scaffold的body属性被设置为_pages[_currentIndex]这是一个非常巧妙的设计。当我通过setState更新_currentIndex时Flutter 会自动重新构建Scaffold并根据新的索引从_pages列表中取出正确的页面来显示。BottomNavigationBar的onTap回调提供了用户点击的index我用它来更新_currentIndex。第四步整合到主应用 - 修改main.dart现在我已经有了一个功能完备的Tabs容器最后一步就是让我的应用在启动时加载它。回到main.dart文件进行如下修改import package:flutter/material.dart; // 1. 移除不再直接使用的 HomePage 和 ProfilePage 导入 // import pages/home.dart; // import pages/profile.dart; // 2. 引入我们新创建的 Tabs 容器 import pages/tabs.dart; import pages/login.dart; import pages/couplet.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Flutter Demo, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.red.shade500), appBarTheme: const AppBarTheme( titleTextStyle: TextStyle( color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold, ), ), ), initialRoute: /, routes: { // 3. 将应用的根路由 / 指向 Tabs Widget /: (context) const Tabs(), // 其他独立页面的路由保持不变 /login: (context) const LoginPage(), /couplet: (context) const CoupletPage(), // 4. HomePage 和 ProfilePage 的路由可以被移除因为它们已由 Tabs 管理 }, ); } }修改解释最核心的改动是将根路由/的目标从HomePage()改为了Tabs()。现在当应用启动时它首先加载的是TabsWidget。TabsWidget 内部的Scaffold和BottomNavigationBar会被构建并且默认显示_currentIndex为 0 对应的页面也就是HomePage。效果预览总结与展望通过以上步骤你已经成功地为一个 Flutter 应用实现了核心的 TabBar 主菜单功能。这个结构不仅在 HarmonyOS 上表现出色在任何支持 Flutter 的平台上都能提供一致的、符合用户习惯的体验。回顾一下关键点识别需求认识到独立页面路由无法满足主菜单导航的需求。封装容器创建一个独立的StatefulWidget(Tabs) 来封装导航逻辑管理状态和页面切换。利用Scaffold使用Scaffold的body和bottomNavigationBar属性来构建 UI 结构。状态驱动 UI通过setState更新当前选中的index驱动body内容的切换。整合应用将MaterialApp的根路由指向新建的Tabs容器。欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net