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

Flutter 多标签页显示有关TabController需要知道的知识

news 2025/9/6 4:36:57

背景

很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑，比如购物软件常有：已完成，已发货，待付款三个顶部导航按钮，点击则下面的页面显示不同属性的订单

正文

在flutter中，实现这样的功能需要依靠TabBar（进行页面选择）和TabBarView（展示不同页面），而TabController起到沟通这两个控件的作用。

DefaultTabController

DefaultTabController，它是一个flutter内置的简易控制器，常在功能不复杂时候用于快速构建页面

DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [],),),body: TabBarView(children: [],),),
)

手动创建TabController

更复杂功能的场景，比如动态添加或删除标签页，监听标签页变化，需要手动创建TabController

步骤如下

StatefulWidget中初始化TabController
使用with SingleTickerProviderStateMixin或TickerProviderStateMixin（如果有多个动画控制器）
在initState方法中初始化TabController，并在dispose方法中释放它

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {TabController? _tabController;@overridevoid initState() {super.initState();_tabController = TabController(vsync: this, length: 3);}@overridevoid dispose() {_tabController?.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(bottom: TabBar(controller: _tabController,tabs: [],),),body: TabBarView(controller: _tabController,children: [],),);}
}