Flutter自定义底部导航栏插件buttons_tabbar的使用

Buttons TabBar简介

Buttons TabBar 是一个开源的Flutter包，它提供的TabBar中的每个标签指示器都是一个切换按钮。通过这个插件，你可以为你的Flutter应用程序创建交互式和可定制的标签栏。

• GitHub Actions
• Pub.dev

功能特性

• ✨ 每个标签指示器是一个切换按钮
• 🎨 可定制外观和行为
• 🖌️ 支持多种样式选项，包括背景颜色、边框颜色、标签样式、图标颜色等
• 🚀 平滑过渡动画
• 📱 类似原生的TabBar工作方式
• ⚙️ 简单易用的配置，支持广泛的参数设置

安装步骤

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

   dependencies:
     flutter:
       sdk: flutter
     buttons_tabbar: ^1.3.14
   

2. 运行flutter pub get安装包。

使用方法

在Dart文件中导入包并根据需要自定义标签栏：

import 'package:buttons_tabbar/buttons_tabbar.dart';

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        // 自定义标签栏的外观和行为
        backgroundColor: Colors.red,
        borderWidth: 2,
        borderColor: Colors.black,
        labelStyle: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
        // 添加你的标签在这里
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

示例代码

以下是一些使用Buttons TabBar的例子：

Example #1

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        backgroundColor: Colors.red,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

Example #2

DefaultTabController(
  length: ...,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        backgroundColor: Colors.blue[600],
        unselectedBackgroundColor: Colors.white,
        labelStyle: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(
          color: Colors.blue[600],
          fontWeight: FontWeight.bold,
        ),
        borderWidth: 1,
        unselectedBorderColor: Colors.blue[600],
        radius: 100,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

Example #3

DefaultTabController(
  length: 6,
  child: Column(
    children: <Widget>[
      ButtonsTabBar(
        radius: 12,
        contentPadding: EdgeInsets.symmetric(horizontal: 12),
        borderWidth: 2,
        borderColor: Colors.transparent,
        center: true,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[
              Color(0xFF0D47A1),
              Color(0xFF1976D2),
              Color(0xFF42A5F5),
            ],
          ),
        ),
        unselectedLabelStyle: TextStyle(color: Colors.black),
        labelStyle: TextStyle(color: Colors.white),
        height: 56,
        tabs: ...,
      ),
      Expanded(
        child: TabBarView(
          children: ...,
        ),
      ),
    ],
  ),
)

更多示例，请参阅example.dart文件。

属性列表

以下是可用于自定义ButtonsTabBar的属性。详细信息请查阅API参考。

使用实例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
    );
  }
}

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

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

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 6,
          child: Column(
            children: <Widget>[
              ButtonsTabBar(
                backgroundColor: Colors.red,
                unselectedBackgroundColor: Colors.grey[300],
                unselectedLabelStyle: TextStyle(color: Colors.black),
                labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                tabs: [
                  Tab(
                    icon: Icon(Icons.directions_car),
                    text: "car",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "transit",
                  ),
                  Tab(icon: Icon(Icons.directions_bike)),
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              Expanded(
                child: TabBarView(
                  children: <Widget>[
                    Center(
                      child: Icon(Icons.directions_car),
                    ),
                    Center(
                      child: Icon(Icons.directions_transit),
                    ),
                    Center(
                      child: Icon(Icons.directions_bike),
                    ),
                    Center(
                      child: Icon(Icons.directions_car),
                    ),
                    Center(
                      child: Icon(Icons.directions_transit),
                    ),
                    Center(
                      child: Icon(Icons.directions_bike),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上是关于如何在Flutter项目中使用buttons_tabbar插件的详细介绍。希望这些信息能帮助你在自己的项目中实现美观且功能丰富的底部导航栏！如果你有任何问题或需要进一步的帮助，请随时提问。