Flutter 实现 TabBar 主菜单功能开发指南

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()。现在，当应用启动时，它首先加载的是 Tabs Widget。Tabs Widget 内部的 Scaffold 和 BottomNavigationBar 会被构建，并且默认显示 _currentIndex 为 0 对应的页面，也就是 HomePage。

效果预览

[图片：TabBar 效果预览]

总结与展望

通过以上步骤，已经成功地为一个 Flutter 应用实现了核心的 TabBar 主菜单功能。这个结构不仅在 HarmonyOS 上表现出色，在任何支持 Flutter 的平台上都能提供一致的、符合用户习惯的体验。

回顾一下关键点：

1. 识别需求：认识到独立页面路由无法满足主菜单导航的需求。
2. 封装容器：创建一个独立的 StatefulWidget (Tabs) 来封装导航逻辑，管理状态和页面切换。
3. 利用 Scaffold：使用 Scaffold 的 body 和 bottomNavigationBar 属性来构建 UI 结构。
4. 状态驱动 UI：通过 setState 更新当前选中的 index，驱动 body 内容的切换。
5. 整合应用：将 MaterialApp 的根路由指向新建的 Tabs 容器。