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

本插件旨在更新Flutter版本。我们仍然尊重原始插件convex_bottom_bar。

官方的BottomAppBar只能展示一个带缺口的FAB（浮动操作按钮）和一个AppBar，有时我们需要一个凸起的FAB。BottomAppBar和NotchShape的实现启发了这个ConvexAppBar。

以下是一些支持的样式：

固定	反应式	徽章芯片
固定圆形	反应圆形	翻转
文字内嵌	带标题	选项卡图像
按钮	固定角	-
		-

如何使用

通常情况下，ConvexAppBar可以与Scaffold一起工作，通过设置其bottomNavigationBar。

ConvexAppBar有两个构造函数。ConvexAppBar()将使用默认样式来简化标签创建。

在你的包的pubspec.yaml文件中添加此内容，并使用最新版本：

dependencies:
  convex_bottom_bar_renew: ^latest_version

示例代码：

import 'package:convex_bottom_bar_renew/convex_bottom_bar_renew.dart';

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'),
  )
);

Flutter版本支持

由于Flutter发展迅速，可能会有破坏性变更。我们将尝试通过不同的包版本支持稳定版和测试版。

特性

• 提供多种内部样式
• 可以改变AppBar的主题
• 提供builder API来自定义新样式
• 在标签菜单上添加徽章
• 提供优雅的过渡动画
• 提供hook API覆盖一些内部样式
• 支持RTL

目录

• 主题化
• 徽章
• 单按钮
• 样式钩子
• RTL支持
• 自定义示例
• 常见问题
• 捐赠

主题化

条形会使用默认样式，你可能想要对其进行主题化。以下是支持的一些属性：

徽章

如果你需要在标签上添加徽章，使用ConvexAppBar.badge即可完成。

示例代码：

ConvexAppBar.badge({
  0: '99+',
  1: Icons.assistant_photo,
  2: Colors.redAccent
},
items: [
  TabItem(icon: Icons.home, title: 'Home'),
  TabItem(icon: Icons.map, title: 'Discovery'),
  TabItem(icon: Icons.add, title: 'Add'),
],
onTap: (int i) => print('click index=$i'),
);

badge()方法接受一个徽章数组；badges是一个键值对映射，每个条目值可以是String、IconData、Color或Widget。

单按钮

如果你只需要一个单按钮，可以查看ConvexButton。

示例代码：

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

样式钩子

用于内部标签样式。与ConvexAppBar.builder不同，你可能希望在不定义新标签样式的情况下更新标签样式。

警告：

此钩子功能有限，如果提供的大小与内部样式不匹配，则可能导致溢出错误。

示例代码：

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](/user/override)
  double get activeIconSize => 40;

  [@override](/user/override)
  double get activeIconMargin => 10;

  [@override](/user/override)
  double get iconSize => 20;

  [@override](/user/override)
  TextStyle textStyle(Color color) {
    return TextStyle(fontSize: 20, color: color);
  }
}

RTL支持

RTL内部支持，并且如果你在应用中定义了TextDirection，AppBar应该可以正常工作。 RTL和LTR都可以通过Directionality进行配置：

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

自定义示例

如果默认样式不符合您的情况，可以尝试使用ConvexAppBar.builder()，允许您自定义几乎所有的标签功能。

示例代码：

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

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