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

背景

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

正文

在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;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [

          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [

        ],
      ),
    );
  }
}

性能

使用TabBarView，所有的标签页内容默认都会被加载。如果每个标签页中都有复杂的布局或需要加载大量数据，会影响性能