ConvexBottomBar 教程

1. 项目介绍

ConvexBottomBar 是一个 Flutter 包，它实现了 ConvexAppBar，即一种展示在底部栏中带有凸起形状标签的设计。该库支持自定义主题，包括固定、反应式和芯片样式等多种风格，并提供了优雅的过渡动画。适用于那些需要在底栏添加有别于原生凹槽形 FAB 的应用场景。

2. 项目快速启动

添加依赖

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

dependencies:
  convex_bottom_bar: ^最新版本

确保替换 ^最新版本 为你所需的确切版本或使用 ^ 符号获取最新的稳定版本。

示例代码

下面是一个简单的 ConvexAppBar 使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: ConvexAppBar(
          items: [
            TabItem(icon: Icons.link),
            TabItem(icon: Icons.import_contacts),
            TabItem(title: "2020", icon: Icons.work),
          ],
          // 可以自定义高度，上移量等属性
          height: 50,
          top: -30,
          curveSize: 100,
        ),
      ),
    );
  }
}

3. 应用案例和最佳实践

在实际应用中，你可以利用 ConvexAppBar 的 initialActiveIndex 属性来设置初始选中的标签，或者通过 style 参数调整底部栏的样式。为了实现响应式的切换，可以监听用户的触摸事件并更新 initialActiveIndex。

int _currentIndex = 0;

void _onTabTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

...

Scaffold(
  ...
  bottomNavigationBar: ConvexAppBar(
    items: [...],
    initialActiveIndex: _currentIndex,
    onTap: _onTabTapped,
  ),
)

4. 典型生态项目

• Material Design：ConvexBottomBar 的设计灵感来源于 Material Design，但是提供了更丰富的定制选项。
• 其他 Flutter 插件：这个库通常与其他 Flutter 包结合使用，例如用于导航（flutter_navigation）或数据持久化（hive）的包，以创建复杂的 UI 结构。

更多关于 ConvexBottomBar 的详细信息，可以在其GitHub 主页找到，包括完整的 API 文档、示例代码和问题反馈区。