【Flutter学习记录】TabBar、TabBarView与TabController：难舍难分

最新推荐文章于 2025-06-16 13:57:51 发布

原创

最新推荐文章于 2025-06-16 13:57:51 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android studio

本文记录了作者在学习Flutter TabBar组件时遇到的一个问题及解决过程。由于在热重载时未正确初始化TabController，导致运行错误。通过理解State的生命周期，作者找到了解决方案——重新运行项目而非仅热重载。这个经验提醒开发者注意在使用TabBar时正确处理TabController的初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

今天在学《Flutter实战》的TabBar组件的时候，遇到一个令我哭笑不得的bug，在此记录一下，以免以后继续掉坑。

TabBar

关于TabBar的知识我建议直接看《Flutter实战》5.6.2 AppBar 。此书十分优秀，强烈建议学习。

坑

起因是因为书上的一个示例：

Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码：

class _ScaffoldRouteState extends State<ScaffoldRoute>
    with SingleTickerProviderStateMixin {
   
   

  TabController _tabController; //需要定义一个Controller
  List tabs = ["新闻", "历史", "图片"];

  @override
  void initState() {
   
   
    super.initState();
    // 创建Controller  
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(