当前位置：首页 > news >正文

Flutter for HarmonyOS 开发指南（五）：实现tabbar主菜单功能

news 2026/4/2 9:10:14

前言

无论是在 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 State<Tabs> createState() => _TabsState(); } class _TabsState extends State<Tabs> { // 1. 定义一个变量来记录当前选中的 Tab 索引 int _currentIndex = 0; // 2. 创建一个 Widget 列表，用于存放我们想要切换的页面 final List<Widget> _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。