Flutter浮动标签栏插件floating_tabbar的使用

简介

floating_tabbar 是一个用于 Flutter 的插件，允许你在所有平台上使用从 Material Design 系统中设计的响应式布局。floating_tabbar 解决并简化了复杂导航用户界面的问题，通过提供一个响应式的解决方案。

开始使用

添加依赖

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  floating_tabbar: ^<latest_version>

导入包

在你的 Dart 文件中导入 floating_tabbar 包：

import 'package:floating_tabbar/floating_tabbar.dart';

主要组件

FloatingTabBar

FloatingTabBar 是一个浮动的标签栏组件。它需要至少两个项目才能正常工作。你可以通过设置 isFloating 属性来控制是否启用浮动效果。

TopTabBar

TopTabBar 允许你创建一个带有内置空间的标签栏，只需将数据传递给 children 参数即可。

Floater

Floater 是一个包装其他组件的 widget，可以给你的组件添加浮动的视觉效果。

Nautics

Nautics 是一个侧边导航栏组件，允许你创建自定义的侧边栏项。你可以使用 TabItem 模型类来提供项的数据。

OpsShell

OpsShell 帮助设计响应式屏幕。对于小屏幕，OpsShell 的子组件看起来很正常，但在大屏幕上会显示类似的响应式布局。

Airoll

Airoll 是一个自定义的 PopupMenuButton，接受 TabItem 列表作为其子组件。

NotificationBadge

NotificationBadge 是一个自定义的徽章组件，可以包裹在其他组件上以创建数字或点通知。

Vitrify

Vitrify 是一个包装其他组件的 widget，可以将组件的外观转换为玻璃卡片样式。

Niftile

Niftile 是一个多用途的瓷砖组件，接受 TabItem 形式的数据来创建瓷砖。

示例代码

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Tabbar Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
        canvasColor: Colors.grey[50],
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating Tabbar Example'),
      ),
      body: FloatingTabBar(
        tabController: _tabController,
        tabs: [
          TabItem(
            icon: Icons.home,
            label: 'Home',
          ),
          TabItem(
            icon: Icons.search,
            label: 'Search',
          ),
          TabItem(
            icon: Icons.person,
            label: 'Profile',
          ),
        ],
        isFloating: true,
        backgroundColor: Colors.white,
        indicatorColor: Colors.blue,
        labelColor: Colors.black,
        unselectedLabelColor: Colors.grey,
        onTap: (index) {
          setState(() {
            _tabController.index = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabController.index,
        onTap: (index) {
          setState(() {
            _tabController.index = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个包含三个标签的 FloatingTabBar，并且启用了浮动效果。每个标签都有一个图标和标签文本。我们还添加了一个 BottomNavigationBar 来切换标签。

希望这个示例能帮助你更好地理解和使用 floating_tabbar 插件。如果你有任何问题或需要进一步的帮助，请随时提问！