Flutter标签页管理插件tab_kit的使用

简介

tab_kit 是一个为 Flutter 用户界面提供多种标签栏的插件。通过该插件，您可以轻松创建和管理复杂的标签页布局。

使用示例

以下是一个完整的示例，展示如何使用 tab_kit 插件来管理标签页。

示例代码

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:tab_kit/tab_kit.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tab Kit Examples',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final List<TabDescriptor> _availableTabs;
  late final NotebookTabController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化可用标签
    _availableTabs = List.from(_tabs);

    // 创建 NotebookTabController 并监听标签删除事件
    _controller = NotebookTabController(
      initialTabs: [
        _availableTabs.removeAt(0), // 移除第一个标签并添加到初始标签列表
      ],
    )..addListener(NotebookTabBarControllerListener(onTabRemoved: (index, tab) {
        _availableTabs.add(tab); // 当标签被移除时，将其重新添加到可用标签列表
      }));
  }

  // 添加新标签的方法
  void _addTab() {
    if (_availableTabs.isEmpty) {
      // 如果没有更多的标签内容可以添加，则退出
      return;
    }

    _controller.addTab(
      _availableTabs.removeAt(0), // 从可用标签列表中移除一个标签并添加到控制器
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (scaffoldContext) {
        return Column(
          children: [
            // 第一个 NotebookTabBar
            Expanded(
              child: Column(
                children: [
                  NotebookTabBar(
                    controller: _controller,
                    style: NotebookTabBarStyle(
                      barBackground: Colors.yellow, // 标签栏背景颜色
                      tabBackground: Colors.white, // 标签背景颜色
                      tabWidth: 200, // 每个标签的宽度
                      dividerColor: Colors.black.withOpacity(0.2), // 分隔线颜色
                    ),
                    onAddTabPressed: _addTab, // 添加标签按钮的回调
                  ),
                  Expanded(
                    child: Container(
                      width: double.infinity,
                      color: Colors.white,
                      child: _buildPage(), // 显示当前活动标签的内容
                    ),
                  ),
                ],
              ),
            ),

            // 第二个 NotebookTabBar（暗色主题）
            Expanded(
              child: Column(
                children: [
                  Theme(
                    data: ThemeData.dark(),
                    child: DefaultTextStyle(
                      style: DefaultTextStyle.of(scaffoldContext).style.copyWith(
                            color: Colors.white,
                          ),
                      child: NotebookTabBar(
                        controller: _controller,
                        style: NotebookTabBarStyle(
                          barBackground: const Color(0xFF2f2f2f), // 标签栏背景颜色
                          tabBackground: const Color(0xFF1c1c1c), // 标签背景颜色
                          tabWidth: 200, // 每个标签的宽度
                          dividerColor: Colors.white.withOpacity(0.1), // 分隔线颜色
                        ),
                        onAddTabPressed: _addTab, // 添加标签按钮的回调
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      width: double.infinity,
                      color: const Color(0xFF1c1c1c),
                      child: _buildPage(), // 显示当前活动标签的内容
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      }),
    );
  }

  // 根据当前活动标签构建页面内容
  Widget _buildPage() {
    if (_controller.activeTab == null) {
      return const SizedBox(); // 如果没有活动标签，返回空容器
    }

    // 根据标签 ID 动态加载内容
    // 示例：可以根据标签 ID 显示不同的内容
    // switch (_controller.activeTab!.id) {
    //   case "1":
    //     return Text("Flutter Content");
    // }

    return const SizedBox(); // 默认返回空容器
  }
}

// 定义可用的标签描述符
const _tabs = [
  TabDescriptor(
    id: "flutter",
    image: AssetImage("assets/icons/flutter_icon.png"), // 图标
    title: "Flutter is a portable UI toolkit", // 标签名
  ),
  TabDescriptor(
    id: "dart",
    image: AssetImage("assets/icons/dart_icon.png"), // 图标
    title: "Dart is a general purpose programming language", // 标签名
  ),
  TabDescriptor(
    id: "tab_kit",
    icon: Icons.account_tree_rounded, // 使用图标代替图像
    title: "tab_kit provides a selection of tab bars", // 标签名
  ),
  TabDescriptor(
    id: "chrome_tab_bar",
    image: AssetImage("assets/icons/chrome_icon.png"), // 图标
    title: "ChromeTabBar is a tab bar similar to Chrome", // 标签名
  ),
  TabDescriptor(
    id: "obsidian_tab_bar",
    image: AssetImage("assets/icons/obsidian_icon.png"), // 图标
    title: "ObsidianTabBar is a tab bar similar to Obsidian", // 标签名
  ),
];