Flutter 零基础入门（四十）：TabBar 与底部导航栏 —— 多页面切换与布局技巧

LarryLan

发布于 2026-03-03 15:49:47

TabBar 与底部导航栏 —— 多页面切换与布局技巧

到目前为止，你已经掌握了：

动态列表刷新（Pull-to-Refresh + 分页）
异步数据请求与显示
SnackBar / AlertDialog 提示
StatefulWidget 与 setState 控制动态 UI

接下来，我们进入 多页面 App 架构：

TabBar → 顶部标签页
BottomNavigationBar → 底部导航
页面切换与状态保持

一、TabBar 基础

1️⃣ 基本结构

DefaultTabController(
  length: 3, // 标签数量
  child: Scaffold(
    appBar: AppBar(
      title: Text('TabBar 示例'),
      bottom: TabBar(
        tabs: [
          Tab(text: '首页'),
          Tab(text: '消息'),
          Tab(text: '我的'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('首页内容')),
        Center(child: Text('消息内容')),
        Center(child: Text('我的内容')),
      ],
    ),
  ),
);

📌 关键点：

DefaultTabController → 管理 Tab 状态
TabBar → 标签
TabBarView → 内容页与标签对应

2️⃣ TabBar 样式自定义

TabBar(
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  indicatorColor: Colors.blue,
  indicatorWeight: 3,
  tabs: [
    Tab(icon: Icon(Icons.home), text: '首页'),
    Tab(icon: Icon(Icons.message), text: '消息'),
    Tab(icon: Icon(Icons.person), text: '我的'),
  ],
)

📌 可以自定义：

图标 / 文本
标签选中颜色 / 未选中颜色
下划线颜色 / 宽度

二、BottomNavigationBar 基础

1️⃣ 基本用法

class BottomNavPage extends StatefulWidget {
  @override
  _BottomNavPageState createState() => _BottomNavPageState();
}

class _BottomNavPageState extends State<BottomNavPage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('首页')),
    Center(child: Text('消息')),
    Center(child: Text('我的')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

📌 功能解析：

_currentIndex → 当前页面索引
setState 切换页面
BottomNavigationBarItem → 图标 + 文本

2️⃣ 状态保持

在 BottomNavigationBar 多页面切换中，如果每个页面都是 StatefulWidget，默认会被重新创建。解决办法：用 IndexedStack 保持页面状态：

body: IndexedStack(
  index: _currentIndex,
  children: _pages,
),

📌 切换页面不会重建 widget → 页面状态保持

三、TabBar 与 BottomNavigationBar 对比

组件	适用场景	特点
TabBar	顶部标签页	通常配合 AppBar / TabBarView
BottomNavigationBar	底部导航	页面多且切换，保持状态建议用 IndexedStack

📌 结合使用也很常见：

顶部 TabBar → 分类切换
底部 BottomNavigationBar → 主模块切换

四、完整示例：底部 + 顶部结合

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('首页'),
          bottom: TabBar(
            tabs: [Tab(text: '推荐'), Tab(text: '最新')],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('推荐内容')),
            Center(child: Text('最新内容')),
          ],
        ),
      ),
    ),
    Center(child: Text('消息页')),
    Center(child: Text('我的页')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

📌 功能总结：

底部导航切换模块
首页模块内部 TabBar 切换分类
使用 IndexedStack 保持状态

五、常见坑

❌ BottomNavigationBar 切换时页面被重建 → 状态丢失 ❌ TabBar 未用 DefaultTabController → 无法切换 ❌ body / TabBarView 内容与 tabs 数量不匹配 → 报错 ❌ 使用 StatefulWidget 嵌套时未注意 key → 状态错乱