Flutter Tab組件詳解

Flutter Tab組件是Flutter中很常用的一種組件，通常用於分組展示信息，或者展示不同的頁面。在這篇文章中，我們將會從多個方面詳細闡述Flutter Tab組件的使用方法和注意事項。

一、創建基本的Tab組件

在Flutter中，我們可以使用Material Design風格的Tab，下面我們來看一個最基本的Tab組件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List tabs = [
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
    Tab(text: 'Tab3'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tab Demo'),
            bottom: TabBar(
              tabs: tabs,
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('This is Tab1')),
              Center(child: Text('This is Tab2')),
              Center(child: Text('This is Tab3')),
            ],
          ),
        ),
      ),
    );
  }
}

我們首先定義了一個包含三個Tab的List，然後在home中使用DefaultTabController包裝Scaffold、AppBar和TabBarView便可實現默認的Tab組件，上方顯示AppBar，下方使用了TabBar，TabView中展示三個頁面，頁面之間能夠通過Tab進行切換。

二、自定義Tab樣式

默認情況下，Tab的樣式比較簡單，但是我們完全可以自定義它的樣式，比如Tab高度、字體樣式等等。下面我們將Tab高度調整至30像素，並且將字體設為16像素：

class MyApp extends StatelessWidget {
  final List tabs = [
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
    Tab(text: 'Tab3'),
  ];

  final TextStyle tabBarTextStyle =
      TextStyle(fontSize: 16, fontWeight: FontWeight.w500);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tab Demo'),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(30.0),
              child: TabBar(
                tabs: tabs,
                labelStyle: tabBarTextStyle,
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('This is Tab1')),
              Center(child: Text('This is Tab2')),
              Center(child: Text('This is Tab3')),
            ],
          ),
        ),
      ),
    );
  }
}

在這個例子中，我們定義了一個TextStyle對象，將Tab字體設為16像素、加粗的樣式。然後在TabBar的labelStyle中使用了這個TextStyle對象，Tab高度通過PreferredSize調整，實現了更加美觀的Tab效果。

三、動態添加或刪除Tab

在一些特殊情況下，我們需要動態添加或刪除Tab，例如根據伺服器數據返回的結果生成Tab。下面我們將演示動態添加一個Tab的方法：

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

class _MyAppState extends State {
  final List tabs = [];
  int tabIndex = 0;

  @override
  void initState() {
    super.initState();
    tabs.add(Tab(text: 'Tab1'));
    tabs.add(Tab(text: 'Tab2'));
  }

  void addTab() {
    setState(() {
      tabIndex++;
      tabs.add(Tab(text: 'Tab$tabIndex'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tab Demo'),
            bottom: TabBar(
              tabs: tabs,
            ),
          ),
          body: TabBarView(
            children: tabs.map((Tab tab) {
              return Center(child: Text('This is ${tab.text}'));
            }).toList(),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: addTab,
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

在這個例子中，我們定義了一個空的Tab List，在initState方法中添加了兩個Tab。然後我們在FloatingActionButton的onPressed方法中動態添加了一個Tab對象並刷新頁面。

四、更加複雜的Tab使用場景

在實際開發中，我們可能需要更加複雜的Tab使用場景，例如Tab左側顯示一個icon，右側顯示一個Badge等等。下面我們將展示一個更好的Tab組件實現方法，包含左側icon、右側Badge、動畫效果等等。

import 'package:flutter/material.dart';

class ComplexTab extends StatefulWidget {
  @override
  _ComplexTabState createState() => _ComplexTabState();
}

class _ComplexTabState extends State {
  final List tabs = [
    _buildTab(icon: Icons.home, badgeCount: 5),
    _buildTab(icon: Icons.mail, badgeCount: 3),
    _buildTab(icon: Icons.person, badgeCount: 8),
  ];

  static Widget _buildTab({IconData icon, int badgeCount}) {
    return Stack(
      children: [
        Tab(
          icon: Icon(icon),
        ),
        Visibility(
          visible: badgeCount > 0,
          child: Positioned(
            top: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.all(1),
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(10),
              ),
              constraints: BoxConstraints(
                minWidth: 18,
                minHeight: 18,
              ),
              child: Text(
                '$badgeCount',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Complex Tab Demo'),
          bottom: TabBar(
            tabs: tabs,
            isScrollable: true,
            indicatorColor: Colors.transparent,
            onTap: (index) {
              setState(() {});
            },
          ),
        ),
        body: TabBarView(
          children: tabs.map((Widget widget) {
            return Center(child: widget);
          }).toList(),
        ),
      ),
    );
  }
}

在這個例子中，我們定義了一個包含三個Widget的List，每個Widget都是一個Stack，包含了左側icon和右側Badge。右側Badge通過一個包裝有Text的Container實現，在數量變化時進行顯示或隱藏操作，使用Visibility能夠使badge不佔據空間。TabBar中設置isScrollable為true時，當Tab數量非常多時會出現滾動條，增加用戶體驗，同時我們還加入Tab切換動畫。

五、結語

到這裡，我們已經闡述了Flutter Tab組件的使用方法和注意事項，可以用於實現基本的Tab組件和複雜的Tab組件。在實際開發中，我們能夠根據需要自由地進行選擇，實現自己的需求。