flutter實現appbar下選項卡切換

import 'package:flutter/material.dart';

/**
 * 有狀態StatefulWidget
 *  繼承於 StatefulWidget，通過 State 的 build 方法去構建控件
 */
class TabBarAndTopTab extends StatefulWidget {
  通過構造方法傳值
  TabBarAndTopTab();

  //主要是負責創建state
  @override
  _DemoStateWidgetState createState() => _DemoStateWidgetState();
}

/**
 * 在 State 中,可以動態改變數據
 * 在 setState 之後，改變的數據會觸發 Widget 重新構建刷新
 */
class _DemoStateWidgetState extends State<TabBarAndTopTab>
    with SingleTickerProviderStateMixin {
  _DemoStateWidgetState();

  List tabs = ["首頁", "發現", "我的", "設置"];

  //用於控制/監聽Tab菜單切換
  //TabBar和TabBarView正是通過同一個controller來實現菜單切換和滑動狀態同步的。
  TabController tabController;

  @override
  void initState() {
    ///初始化，這個函數在生命周期中隻調用一次
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void didChangeDependencies() {
    ///在initState之後調 Called when a dependency of this [State] object changes.
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return buildTabScaffold();
  }

  //通過“bottom”屬性來添加一個導航欄底部tab按鈕組，將要實現的效果如下：
  Widget buildTabScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text('標題'),
        //設置選項卡
        bottom: buildTabBar(),
        //設置標題居中
        centerTitle: true,
      ),
      //設置選項卡對應的page
      body: buildBodyView(),
    );
  }

  //當整個頁面dispose時，記得把控制器也dispose掉，釋放內存
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  buildBodyView() {
    //構造 TabBarView
    Widget tabBarBodyView = TabBarView(
      controller: tabController,
      //創建Tab頁
      children: tabs.map((e) {
        return Container(
          alignment: Alignment.center,
          child: Text(e, textScaleFactor: 1),
        );
      }).toList(),
    );
    return tabBarBodyView;
  }

  buildTabBar() {
    //構造 TabBar
    Widget tabBar = TabBar(
        //tabs 的長度超出屏幕寬度後，TabBar，是否可滾動
        //設置為false tab 將平分寬度，為true tab 將會自適應寬度
        isScrollable: false,
        //設置tab文字得類型
        labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        //設置tab選中得顏色
        labelColor: Colors.white,
        //設置tab未選中得顏色
        unselectedLabelColor: Colors.white70,
        //設置自定義tab的指示器，CustomUnderlineTabIndicator
        //若不需要自定義，可直接通過
        //indicatorColor 設置指示器顏色
        //indicatorWight 設置指示器厚度
        //indicatorPadding
        //indicatorSize  設置指示器大小計算方式
        ///指示器大小計算方式，TabBarIndicatorSize.label跟文字等寬,TabBarIndicatorSize.tab跟每個tab等寬
        indicatorSize: TabBarIndicatorSize.tab,
        //生成Tab菜單
        controller: tabController,
        //構造Tab集合
        tabs: tabs.map((e) => Tab(text: e)).toList());

    return tabBar;
  }
}