Flutter——TabBar組件（頂部Tab切換組件）

TabBar組件的常用屬性：

屬性	描述
tabs	顯示的標簽內容，一般使用 Tab 對象,也可以是其他的Widget
controller	TabController 對象
isScrollable	是否可滾動
indicatorColor	指示器顏色
indicatorWeight	指示器高度
indicatorPadding	底部指示器的 Padding
indicator	指示器 decoration，例如邊框等
indicatorSize	指示器大小計算方式，TabBarIndicatorSize.label 跟文字等寬,TabBarIndicatorSize.tab 跟每個 tab 等寬
labelColor	選中 label 顏色
labelStyle	選中 label 的 Style
labelPadding	每個 label 的 padding 值
unselectedLabelColor	未選中 label 顏色
unselectedLabelStyle	未選中 label 的 Style

 

 

• TabBar的實現方式1（不常用）

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: DefaultTabController(
        length: 6,
        child: Scaffold(
          appBar: AppBar(
              title: Text("TabBarDemo"),
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(text: "熱門"),
                  Tab(text: "推薦"),
                  Tab(text: "關注"),
                  Tab(text: "收藏"),
                  Tab(text: "新增"),
                  Tab(text: "點贊"),
                ],
              ),
          ),
          body: TabBarView(
            children: <Widget>[
              Center(
                child: Text("這是熱門的內容")
              ),
              Center(
                  child: Text("這是推薦的內容")
              ),
              Center(
                  child: Text("這是關注的內容")
              ),
              Center(
                  child: Text("這是收藏的內容")
              ),
              Center(
                  child: Text("這是新增的內容")
              ),
              Center(
                  child: Text("這是點贊的內容")
              )
            ],
          ),
        ),
      ),
    )
  );
}

 

• TabBar的實現方式2（常用）

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "TabBarWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("頂部Tab切換"),
        bottom: TabBar(
          tabs: <Widget>[
            Tab(text: "熱門"),
            Tab(text: "推薦"),
            Tab(text: "關注"),
            Tab(text: "收藏"),
            Tab(text: "新增"),
            Tab(text: "點贊"),
          ],
          controller: _tabController,  // 記得要帶上tabController
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(
              child: Text("這是熱門的內容")
          ),
          Center(
              child: Text("這是推薦的內容")
          ),
          Center(
              child: Text("這是關注的內容")
          ),
          Center(
              child: Text("這是收藏的內容")
          ),
          Center(
              child: Text("這是新增的內容")
          ),
          Center(
              child: Text("這是點贊的內容")
          )
        ],
      ),
    );
  }
}