从零开始实现 Flutter 自定义TabBar

2023-12-19 14:55:32

Flutter 的確很強大，但美中不足的是生態還有待完善，沒有出現像前端的 Antd 或 Element 那樣全能的基礎 UI 庫。由此帶來的直接影響是開發效率提不上去，需要耗費大量的時間精力在基礎組件的封裝上。官方的 TabBar 不滿足需求，又沒有合適的輪子，只好自己造…

TabBar 的作用

TabBar 是 Flutter 中的一個常用組件，它可以幫助我們在應用程序中創建一個帶有標籤的導航欄。TabBar 通常位於應用程序的頂部，它包含一組標籤，每個標籤對應一個頁面。當用戶點擊某個標籤時，對應的頁面就會被加載。

TabBar 可以讓用戶在應用程序中快速切換頁面，它非常適合用於具有多個頁面的應用程序，例如電商應用程序、新聞應用程序和社交媒體應用程序。

Flutter 自定義 TabBar 的實現

Flutter 自定義 TabBar 的實現並不複雜，我們可以通過繼承 TabBar 類並覆寫一些方法來實現。下面我們來一步一步地實現一個 Flutter 自定義 TabBar。

創建一個新的 Flutter 項目。
在 lib 目錄下創建一個新的 Dart 文件，並將其命名為 custom_tab_bar.dart。
在 custom_tab_bar.dart 文件中，導入必要的庫。

import 'package:flutter/material.dart';

創建一個新的類，並將其命名為 CustomTabBar。

class CustomTabBar extends TabBar {
  CustomTabBar({
    required List<Tab> tabs,
    required TabController controller,
  }) : super(tabs: tabs, controller: controller);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TabBar(
        tabs: tabs,
        controller: controller,
        indicatorColor: Colors.white,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.grey,
        labelStyle: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.normal,
        ),
      ),
    );
  }
}

在 build 方法中，我們首先創建一個 Container，並設置它的高度和裝飾。然後，我們在 Container 中添加一個 TabBar，並設置它的屬性，包括標籤、控制器、指示器顏色、標籤顏色、未選中標籤顏色、標籤樣式和未選中標籤樣式。
在 pubspec.yaml 文件中，將 custom_tab_bar.dart 文件添加到依賴項中。

dependencies:
  flutter:
    sdk: flutter
  custom_tab_bar:
    path: lib/custom_tab_bar.dart

在 main.dart 文件中，導入 custom_tab_bar.dart 文件，並在 MyApp 類中使用 CustomTabBar。

import 'package:flutter/material.dart';
import 'package:custom_tab_bar/custom_tab_bar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom TabBar Example'),
          bottom: CustomTabBar(
            tabs: [
              Tab(text: 'Home'),
              Tab(text: 'About'),
              Tab(text: 'Contact'),
            ],
            controller: TabController(length: 3, vsync: VerticalSync()),
          ),
        ),
        body: TabBarView(
          controller: TabController(length: 3, vsync: VerticalSync()),
          children: [
            Center(child: Text('Home')),
            Center(child: Text('About')),
            Center(child: Text('Contact')),
          ],
        ),
      ),
    );
  }
}