Flutter學習- TabBar組件

TabBar是一種導航組件，它可以顯示在某些組件的底部，主要用於在不同頁面之間切換。

使用TabBar，一定要給予tabs屬性，裡面為要選擇的選項，類型為陣列，要用[ ]。

另外，要配合選擇進行頁面轉換，就要使用TabBarController，可以用系統本身的DefaultTabController，也可以自己創建。

如下範例:

(1)TabController使用DefaultTabController

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    //TabBar要有一個TabController，可用預設的，也可以自己宣告
    return DefaultTabController(
        //選項長度 3個
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('測試Hero'),
          bottom: TabBar(
            tabs: [
              //選項內容，可用文字、icon或是child放入其它組件
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.list)),
              Tab(icon: Icon(Icons.settings)),
            ],
          ),
        ),
        //使用TabBarView與上面的TabBar相互配合
        body: TabBarView(
          children: [
            Center(child: Text('Home 1')),
            Center(child: Text('list 2')),
            Center(child: Text('settings 3')),
          ],
        ),
        //使用DefaultTabController組件包著
      ),
    );
  }
}

(2)TabController自己宣告

//tabBar的設計
class TopTab extends StatefulWidget {
  const TopTab({Key? key}) : super(key: key);

  @override
  State<TopTab> createState() => _TopTabState();
}

class _TopTabState extends State<TopTab> with SingleTickerProviderStateMixin {
  //設定tabBar的控制器
  late TabController _controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //於初始化時，將_controller初始化為一個選項有2項的，預設值為1的 TabController
    _controller = TabController(length: 3, initialIndex: 1, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //不用使釋放資源
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: TabBar(
        //下方指示線顏色
        indicatorColor: Colors.greenAccent,
        //下方指示線寬度
        indicatorPadding: const EdgeInsets.symmetric(horizontal: 25),
        //選項顏色
        labelColor: Colors.blue,
        //下方指示線長度
        // indicatorWeight: 12,
        //控制器
        controller: _controller,
        //tab的文字內容
        labelStyle: const TextStyle(color: Colors.blueAccent, fontSize: 25),

        //不選取時的lab形式
        unselectedLabelStyle: TextStyle(color: Colors.green[700], fontSize: 20),
        tabs: <Widget>[
          Tab(
            icon: Icon(Icons.add),
          ),
          Text('關注'),
          Text('推薦'),
        ],
      ),
    );
  }
}