Flutter底部导航栏修复插件bottom_bar_fix的使用

在Flutter开发中，底部导航栏是一个非常常见的UI组件。然而，Flutter官方的BottomAppBar只能显示一个带有缺口的浮动操作按钮（FAB），这在某些场景下可能无法满足需求。为了解决这一问题，我们可以使用convex_bottom_bar插件，它提供了多种风格的底部导航栏，并支持自定义主题、动画效果等。

插件简介

convex_bottom_bar 是一个功能强大的底部导航栏插件，灵感来源于 BottomAppBar 和 NotchShape 的实现。它允许开发者创建更复杂的凸起形状和自定义样式。

功能特点：

• 提供多种内置样式。
• 支持更改 AppBar 的主题。
• 提供构建器 API，可以自定义新的样式。
• 可以在标签菜单上添加徽章。
• 拥有优雅的过渡动画。
• 提供钩子 API 来覆盖部分内部样式。
• 支持 RTL（从右到左）布局。

如何使用

要开始使用 convex_bottom_bar 插件，首先需要将其添加到项目的依赖中。

1. 添加依赖

在 pubspec.yaml 文件中添加以下内容：

dependencies:
  convex_bottom_bar: ^最新版本号

然后运行 flutter pub get 安装依赖。

2. 基本用法

ConvexAppBar 可以通过设置 Scaffold 的 bottomNavigationBar 属性来使用。它有两个构造函数：ConvexAppBar() 和 ConvexAppBar.builder()。其中，ConvexAppBar() 使用默认样式简化了选项卡的创建。

示例代码：

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/bottom_bar_fix.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ConvexAppBar 示例'),
      ),
      body: Center(
        child: Text('点击导航栏切换页面'),
      ),
      bottomNavigationBar: ConvexAppBar(
        items: [
          TabItem(icon: Icons.home, title: '首页'),
          TabItem(icon: Icons.search, title: '搜索'),
          TabItem(icon: Icons.add, title: '发布'),
          TabItem(icon: Icons.chat, title: '消息'),
          TabItem(icon: Icons.person, title: '我的'),
        ],
        initialActiveIndex: 2, // 默认选中的索引
        onTap: (int index) => print('点击了第 $index 个选项'),
      ),
    );
  }
}

效果图：

自定义样式

如果默认样式不符合需求，可以通过 builder 方法来自定义每个选项卡的外观。

示例代码：

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/bottom_bar_fix.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义导航栏'),
      ),
      body: Center(
        child: Text('自定义选项卡样式'),
      ),
      bottomNavigationBar: ConvexAppBar.builder(
        count: 5, // 总共有5个选项卡
        backgroundColor: Colors.blue,
        style: TabStyle.fixed, // 固定风格
        itemBuilder: (context, index, active) {
          return Text(
            'Tab $index',
            style: TextStyle(
              fontSize: active ? 18 : 16,
              fontWeight: active ? FontWeight.bold : FontWeight.normal,
            ),
          );
        },
      ),
    );
  }
}

添加徽章

如果需要在选项卡上显示徽章（如未读消息数量），可以使用 ConvexAppBar.badge() 方法。

示例代码：

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/bottom_bar_fix.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('带徽章的导航栏'),
      ),
      body: Center(
        child: Text('徽章示例'),
      ),
      bottomNavigationBar: ConvexAppBar.badge(
        {0: '99+', 1: Icons.notifications, 2: Colors.redAccent}, // 徽章数据
        items: [
          TabItem(icon: Icons.home, title: '首页'),
          TabItem(icon: Icons.chat, title: '消息'),
          TabItem(icon: Icons.settings, title: '设置'),
        ],
        onTap: (int index) => print('点击了第 $index 个选项'),
      ),
    );
  }
}

RTL 支持

convex_bottom_bar 插件原生支持 RTL（从右到左）布局。只需在应用中设置 TextDirection 即可。

示例代码：

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/bottom_bar_fix.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Directionality(
        textDirection: TextDirection.rtl,
        child: Scaffold(
          appBar: AppBar(
            title: Text('RTL 导航栏'),
          ),
          body: Center(
            child: Text('RTL 示例'),
          ),
          bottomNavigationBar: ConvexAppBar(
            items: [
              TabItem(icon: Icons.home, title: '主页'),
              TabItem(icon: Icons.search, title: '搜索'),
            ],
            initialActiveIndex: 0,
            onTap: (int index) => print('点击了第 $index 个选项'),
          ),
        ),
      ),
    );
  }
}