import 'package:flutter/material.dart';

/**
 * 有狀態(tài)StatefulWidget
 *  繼承于 StatefulWidget，通過 State 的 build 方法去構(gòu)建控件
 */
class TabBarAndTopTab extends StatefulWidget {
  通過構(gòu)造方法傳值
  TabBarAndTopTab();

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

/**
 * 在 State 中,可以動態(tài)改變數(shù)據(jù)
 * 在 setState 之后，改變的數(shù)據(jù)會觸發(fā) Widget 重新構(gòu)建刷新
 */
class _DemoStateWidgetState extends State<TabBarAndTopTab>
    with SingleTickerProviderStateMixin {
  _DemoStateWidgetState();

  List tabs = ["首頁", "發(fā)現(xiàn)", "我的", "設(shè)置"];

  //用于控制/監(jiān)聽Tab菜單切換
  //TabBar和TabBarView正是通過同一個controller來實現(xiàn)菜單切換和滑動狀態(tài)同步的。
  TabController tabController;

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

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

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

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

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

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

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

    return tabBar;
  }
}