【Flutter】Flutter 使用 convex_bottom_bar 实现底部导航栏

文章目录

一、前言

convex_bottom_bar 是一个用于 Flutter 的底部导航栏包，版本号为 3.2.0。它提供了一种简单的方法来创建凸起的底部导航栏。这个包的设计灵感来自于 Google 的 Material Design 指南，但它也提供了许多自定义选项，使开发者可以轻松地调整导航栏的外观和行为。

本文的重点：

了解 convex_bottom_bar 的主要功能
学习如何安装和配置
探索基本使用和自定义主题样式
了解如何创建单独的凸起按钮和自定义选项卡样式

你是否渴望成为 Flutter 的专家，掌握更多的技巧和最佳实践？我们有个好消息要告诉你！ Flutter 从零到一基础入门到应用上线全攻略 正在等待你的加入！这个专栏包含了你需要的所有 Flutter 学习资源，包括代码示例和深度解析。专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。让我们今天就开始 Flutter 的学习之旅吧！

二、安装与配置

要开始使用 convex_bottom_bar，你需要将其添加到项目的依赖中。以下是安装和配置的步骤：

添加依赖： 在项目的 pubspec.yaml 文件中，添加以下代码：
```
dependencies:
  convex_bottom_bar: ^3.2.0
```
获取包： 运行 flutter pub get 命令来下载包。
导入包： 在你想使用 convex_bottom_bar 的文件中，添加以下导入语句：
```
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
```

通过以上步骤，你就可以开始使用 convex_bottom_bar 来创建凸起的底部导航栏了。

三、基本使用与自定义主题样式

使用 convex_bottom_bar 创建底部导航栏非常简单。

以下是一个基本示例：

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    onTap: (int i) => print('click index=$i'),
  )
);

你还可以自定义 AppBar 的背景、颜色和高度，例如：

ConvexAppBar(
  style: TabStyle.react,
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.map, title: 'Discovery'),
  ],
  backgroundColor: Colors.blue,
  height: 60,
)

通过这些选项，你可以轻松地创建一个符合你项目需求的底部导航栏。

这是小雨青年于 2023 年发布在 CSDN 的博客，由于目前采集站侵权行为猖獗，如果你不是在 CSDN 看到本文，麻烦你通过 CSDN 联系我，谢谢你的支持~

四、按钮与样式钩子

1. 单个按钮的使用

如果你只需要一个单独的凸起按钮，可以使用 ConvexButton。以下是一个示例：

Scaffold(
  appBar: AppBar(title: const Text('ConvexButton Example')),
  body: Center(child: Text('count $count')),
  bottomNavigationBar: ConvexButton.fab(
    onTap: () => setState(() => count++),
  ),
);

2. 自定义样式钩子

convex_bottom_bar 还提供了 StyleHook API，允许你自定义选项卡样式。以下是一个示例：

StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.link),
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon: Icons.work),
    ],
    backgroundColor: _tabBackgroundColor,
  ),
);

class Style extends StyleHook {
    
    
  @override
  double get activeIconSize => 40;
  @override
  double get activeIconMargin => 10;
  @override
  double get iconSize => 20;
  @override
  TextStyle textStyle(Color color) {
    
    
    return TextStyle(fontSize: 20, color: color);
  }
}

请注意，这个钩子有限制，如果你提供的尺寸与内部样式不匹配，可能会导致溢出错误。

五、右到左支持与自定义示例

1. RTL 支持

convex_bottom_bar 内部支持 RTL（从右到左）文本方向。你可以通过 Directionality 配置 RTL 和 LTR：

Directionality(
  textDirection: TextDirection.rtl,
  child: Scaffold(body: ConvexAppBar(/*TODO ...*/)),
);

2. 自定义示例

如果默认样式不符合你的需求，你可以使用 ConvexAppBar.builder() 创建几乎所有的选项卡特性：

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: 5,
    backgroundColor: Colors.blue,
    itemBuilder: Builder(),
  )
);

// 用户定义的类
class Builder extends DelegateBuilder {
    
    
  @override
  Widget build(BuildContext context, int index, bool active) {
    
    
    return Text('TAB $index');
  }
}

六、总结

convex_bottom_bar 是一个强大而灵活的 Flutter 底部导航栏包，版本号为 3.2.0。通过本文，我们了解了如何安装和配置该包，以及如何使用其丰富的特性和自定义选项来创建凸起的底部导航栏。

你是否对 Flutter 感到好奇，想要深入学习？那么，Flutter 从零到一基础入门到应用上线全攻略 将是你的最佳选择！在这里，你可以找到全面的 Flutter 学习资源，包括代码示例和深度解析。你是否想知道如何用 Flutter 构建应用？所有的答案都在我们的专栏里！别再犹豫了，专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！让我们一起在 Flutter 的世界中探索吧！想了解更多？点击这里查看 Flutter Developer 101 入门小册专栏指引。此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。