背景

很多應(yīng)用都需要導(dǎo)航欄加多個標(biāo)簽頁的方式來構(gòu)建一個多頁顯示邏輯，比如購物軟件常有：已完成，已發(fā)貨，待付款三個頂部導(dǎo)航按鈕，點(diǎn)擊則下面的頁面顯示不同屬性的訂單

正文

在flutter中，實(shí)現(xiàn)這樣的功能需要依靠TabBar（進(jìn)行頁面選擇）和TabBarView（展示不同頁面），而TabController起到溝通這兩個控件的作用。

DefaultTabController

DefaultTabController，它是一個flutter內(nèi)置的簡易控制器，常在功能不復(fù)雜時候用于快速構(gòu)建頁面
?

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

手動創(chuàng)建TabController

更復(fù)雜功能的場景，比如動態(tài)添加或刪除標(biāo)簽頁，監(jiān)聽標(biāo)簽頁變化，需要手動創(chuàng)建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: [],),);}
}

性能

使用TabBarView，所有的標(biāo)簽頁內(nèi)容默認(rèn)都會被加載。如果每個標(biāo)簽頁中都有復(fù)雜的布局或需要加載大量數(shù)據(jù)，會影響性能