Flutter 自定义 TabBar 插件 polar_tab_bar 的使用

Polar Tab Bar 是一个可定制且带有内置 PageView 的圆角标签栏，可以保存用户界面状态。

Polar Tab Bar 有两种类型：Pill 和 Step。

Pill (PolarTabType.Pill)	Step (PolarTabType.Step)

开始使用

在 pubspec.yaml 文件中添加 polar_tab_bar 依赖：

dependencies:
  ...
  polar_tab_bar: ^0.0.2

基本用法

首先创建标签项：

final List<PolarTabItem> tabs = [
  PolarTabItem(
    index: 0,
    title: "Home",
    page: const PolarTabPage(
      child: HomePage(),
    ),
  ),
  PolarTabItem(
    index: 1,
    title: "Category",
    page: const PolarTabPage(child: CategoryPage()),
  ),
  PolarTabItem(
    index: 2,
    title: "Profile",
    page: const PolarTabPage(child: ProfilePage()),
  ),
];

注意：请将子部件包装在 PolarTabPage 中以在每个导航时保存用户界面状态。

然后可以在你的部件中使用 PolarTabBar：

Scaffold(
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.indigoAccent,
    title: const Text(
      "Polar Tabbar",
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
    ),
  ),
  body: SafeArea(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: PolarTabBar(
        type: PolarTabType.pill, // 默认类型
        tabs: tabs
      ),
    ),
  ),
)

定制化

• type (默认: PolarTabType.pill) - 标签栏的类型。
• pageController (可选) - 如果你需要完全控制内部的 PageView。
• height (可选) - 如果你将 PolarTabBar 放置在滚动父部件（如 ListView、SingleChildScrollView 等）中，则需要指定高度。
• contentSpacing - 每个标签项之间的间距。
• innerPadding - 标签项内边距。
• radius - 标签项的圆角半径。
• background (可选) - 未激活标签项的背景颜色。
• activeBackground (可选) - 激活标签项的背景颜色。
• titleStyle (可选) - 未激活标签项的文本样式。
• activeTitleStyle (可选) - 激活标签项的文本样式。
• isDense - 使标签更紧凑。
• curve - 动画曲线。
• duration (默认: 300ms) - 动画持续时间。
• swipable (默认: true) - 使 PageView 可滑动。

示例代码

以下是一个完整的示例代码，展示了如何使用 PolarTabBar 插件：

import 'package:example/pages/category_page.dart';
import 'package:example/pages/home_page.dart';
import 'package:example/pages/profile_page.dart';
import 'package:flutter/material.dart';
import 'package:polar_tab_bar/models/polar_tab_item.dart';
import 'package:polar_tab_bar/polar_tab_bar.dart';
import 'package:polar_tab_bar/widgets/polar_tab_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final List<PolarTabItem> tabs = [
      PolarTabItem(
        index: 0,
        title: "Home",
        page: const PolarTabPage(
          child: HomePage(),
        ),
      ),
      PolarTabItem(
        index: 1,
        title: "Category",
        page: const PolarTabPage(child: CategoryPage()),
      ),
      PolarTabItem(
        index: 2,
        title: "Profile",
        page: const PolarTabPage(child: ProfilePage()),
      ),
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.indigoAccent,
          title: const Text(
            "Polar Tabbar",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: PolarTabBar(
              tabs: tabs,
            ),
          ),
        ),
      ),
    );
  }
}