Flutter底部导航栏插件bottom_cupertino_tabbar的使用

Overview

BottomCupertinoTabbar 是一个 Flutter 插件，用于创建具有 Cupertino（iOS 风格）外观的自定义和直观的底部导航栏。该插件为每个标签提供了独立的导航栈，确保用户在切换标签时保留每个标签的状态。

该插件提供了广泛的自定义选项，包括在标签栏的不同位置添加浮动操作按钮或其他小部件的能力。

Table of Contents

• Features
• Installation
• Import
• Basic Usage
• Customization
• Tabs and State Preservation
• Complete Example
• Conclusion
• Donate

Features

• Cupertino Aesthetic: 提供具有 iOS 风格设计的底部导航栏，无缝融入旨在实现 iOS 外观和感觉的应用程序。
• Separate Navigation Stacks: 支持每个标签的独立导航栈，允许在切换标签时保留导航历史记录和每个标签的状态。
• Customizable Tab Items: 自定义每个标签的活动和非活动状态图标，添加标签文本，显示带有计数的通知徽章等。
• Customization of the Tab Bar: 自定义活动和非活动状态的标签图标和文本颜色，设置通知徽章的颜色，确定初始活动的标签等。
• Floating Action Button (FAB) or Custom Widgets: 将浮动操作按钮或其他小部件集成到标签栏中，灵活地将其放置在中心或任何其他 FloatingActionButtonLocation。
• Responsive and Adaptive: 设计为响应式并适应不同的屏幕尺寸和方向。
• Easy Integration: 可轻松集成到现有的 Flutter 项目中，增强导航体验而无需对应用结构进行大量更改。
• State Preservation Across Tabs: 确保在用户切换标签时保留每个标签内的状态（如用户输入、滚动位置等），提供无缝的用户体验。
• Customizable Behavior on Tab Presses: onTabPressed 回调允许在选择标签时自定义行为，如弹出到堆栈的第一个路由、刷新数据等。

Installation

在 pubspec.yaml 文件中添加 bottom_cupertino_tabbar 作为依赖项。

dependencies:
  bottom_cupertino_tabbar: ^latest_version

Import

在需要使用该插件的地方导入包。

import 'package:bottom_cupertino_tabbar/bottom_cupertino_tabbar.dart';

Basic Usage

BottomCupertinoTabbar 可以在一个 StatefulWidget 中使用，以便有效地实现。

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

  @override
  State<SimpleTabBar> createState() => _SimpleTabBarState();
}

class _SimpleTabBarState extends State<SimpleTabBar> {
  @override
  Widget build(BuildContext context) {
    return BottomCupertinoTabbar(
      // 添加你的配置和自定义选项
    );
  }
}

以下是一个简单的示例，展示了如何使用 BottomCupertinoTabbar 创建一个包含 Home、Notifications、Contacts 和 Settings 标签的底部导航栏。每个标签都链接到相应的页面和图标，并且状态和导航栈得以保留。

Customization

BottomCupertinoTabbar 可以广泛自定义：

• Floating Action Button: 可以在标签栏的中心或任何 FloatingActionButtonLocation 位置添加浮动操作按钮（FAB）或其他小部件。这允许进行额外的操作和独特的设计。
• Custom Icons and Labels: 每个标签可以有自定义图标和标签，允许个性化外观。你可以为活动和非活动状态设置图标。
• Custom Colors and Themes: 自定义颜色方案和主题以匹配你的应用设计。你可以为活动和非活动状态设置颜色。
• Adjustable Size and Positioning: 可以调整标签栏及其元素的大小和位置以适应布局需求。

BottomCupertinoTabbar 主要自定义选项

Tabs and State Preservation

标签使用 BottomCupertinoTab 小部件创建。每个标签都有自己的导航栈和状态管理，保留用户交互和导航历史记录。这是 BottomCupertinoTabbar 包的关键组件之一。它表示底部导航栏中的单个标签。

BottomCupertinoTab

class BottomCupertinoTab {
  final BottomCupertinoTabItem tab;
  final Widget page;

  const BottomCupertinoTab({
    required this.tab,
    required this.page
  });
}

参数：

• tab (BottomCupertinoTabItem): 标签的外观和行为配置。
• page (Widget): 当标签处于活动状态时显示的小部件。通常是一个 Flutter 页面或屏幕。

每个标签由一个 BottomCupertinoTabItem 进行配置，并且包含一个表示选中标签时显示内容的 Flutter 小部件。

BottomCupertinoTabItem

BottomCupertinoTabItem 类用于配置 BottomCupertinoTabbar 中单个标签的外观和行为。

class BottomCupertinoTabItem {

  /// 要显示的图标
  final Widget? icon;

  /// 标签处于活动状态时的图标
  final Widget? activeIcon;

  /// 标签处于非活动状态时的图标
  final Widget? inactiveIcon;

  /// 标签的文本标签
  final String? label;

  /// 要显示的通知数量
  final int notificationsCounter;

  /// 控制是否显示通知计数器
  final bool showNotifications;

  /// 指示该标签是否被视为占位符
  final bool empty;

  /// 标签处于活动状态时使用的文本样式
  final TextStyle? activeLabelTextStyle;

  /// 标签处于非活动状态时使用的文本样式
  final TextStyle? inactiveLabelTextStyle;

  const BottomCupertinoTabItem({
    this.icon,
    this.activeIcon,
    this.inactiveIcon,
    this.label,
    this.notificationsCounter = 0,
    this.showNotifications = false,
    this.empty = false,
    this.activeLabelTextStyle,
    this.inactiveLabelTextStyle,
  });
}

BottomCupertinoTab 的示例：

BottomCupertinoTab(
  tab: BottomCupertinoTabItem(
    icon: Icon(Icons.home, size: 22,),
    label: "Home",
  ),
  page: HomePage(),
)

Complete Example

以下是完整示例的代码：

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

import '../pages/pages.dart';
import 'example_manager/example_manager.dart';

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

  @override
  State<EasyTabbar> createState() => _EasyTabbarState();
}

class _EasyTabbarState extends State<EasyTabbar> {
  @override
  Widget build(BuildContext context) {
    return BottomCupertinoTabbar(
      activeColor: Colors.blue,
      inactiveColor: Colors.grey[300]!,
      notificationsBadgeColor: Colors.red,
      firstActiveIndex: 0,
      resizeToAvoidBottomInset: false,
      showLabels: true,
      overrideIconsColor: true,
      tabbarModel: (model, nestedNavigator) {
        ExampleManager().tabbarProviderModel = model;
        ExampleManager().nestedNavigator = nestedNavigator;
      },
      onTabPressed: (index, model, nestedNavigator) {
        if (index != model.currentTab) {
          model.changePage(index);
        } else {
          if (nestedNavigator[index]?.currentContext != null) {
            Navigator.of(nestedNavigator[index]!.currentContext!)
                .popUntil((route) => route.isFirst);
          }
        }
      },
      children: const [
        BottomCupertinoTab(
          tab: BottomCupertinoTabItem(
            icon: Icon(Icons.home, size: 22,),
            label: "Home",
          ),
          page: HomePage(),
        ),
        BottomCupertinoTab(
          tab: BottomCupertinoTabItem(
            icon: Icon(Icons.notifications, size: 22,),
            label: "Notifications",
          ),
          page: NotificationsPage(),
        ),
        BottomCupertinoTab(
          tab: BottomCupertinoTabItem(
            icon: Icon(Icons.contacts, size: 22,),
            notificationsCounter: 4,
            showNotifications: true,
            label: "Contacts",
          ),
          page: ContactsPage(),
        ),
        BottomCupertinoTab(
          tab: BottomCupertinoTabItem(
            icon: Icon(Icons.settings, size: 22,),
            label: "Settings",
          ),
          page: SettingsPage(),
        ),
      ],
    );
  }
}

更多示例可以在包的 example 文件夹中找到。

Conclusion

BottomCupertinoTabbar 是一个理想的 Flutter 应用程序插件，适用于需要具有高级自定义功能的底部导航栏，包括在不同位置添加浮动操作按钮或其他小部件。该插件符合原生 iOS 导航模式，并通过其状态保留和广泛的自定义功能增强了用户体验。

Donate

喜欢这个插件吗？考虑捐赠一杯咖啡或啤酒 :）