背景

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

正文

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

DefaultTabController

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

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

手動(dòng)創(chuàng)建TabController

更復(fù)雜功能的場(chǎng)景，比如動(dòng)態(tài)添加或刪除標(biāo)簽頁(yè)，監(jiān)聽標(biāo)簽頁(yè)變化，需要手動(dòng)創(chuàng)建TabController

步驟如下

• StatefulWidget中初始化TabController
• 使用with SingleTickerProviderStateMixin或TickerProviderStateMixin（如果有多個(gè)動(dòng)畫控制器）
• 在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)簽頁(yè)內(nèi)容默認(rèn)都會(huì)被加載。如果每個(gè)標(biāo)簽頁(yè)中都有復(fù)雜的布局或需要加載大量數(shù)據(jù)，會(huì)影響性能