Flutter水滴导航栏插件water_drop_nav_bar的使用

插件简介

设计来源 & 屏幕录制

设计灵感来源于 Cuberto 的 Animated Tabbar。

使用方法

安装

在 pubspec.yaml 文件中添加依赖项，然后运行 flutter pub get：

dependencies:
  water_drop_nav_bar:

导入

在 Dart 文件中导入包：

import 'package:water_drop_nav_bar/water_drop_nav_bar.dart';

将 WaterDropNavBar() 作为 Scaffold() 的 bottomNavigationBar，并设置 body 为带有 NeverScrollableScrollPhysics() 的 PageView()。不要尝试通过 onPageChanged 更新选定索引，否则可能会出现一些奇怪的行为。也可以使用 Stack() 或 AnimatedSwitcher 来实现自定义页面过渡动画。

API 参考

注意事项

• 不要使图标尺寸过大。
• 使用互补的填充和轮廓图标以获得最佳效果。
• WaterDropNavBar() 的 backgroundColor 和 waterDropColor 必须与 Scaffold() 的 backgroundColor（或你使用的任何小部件）不同（参见示例应用程序）。这将可视化水滴悬挂在顶部的效果。

示例代码

return Scaffold(
  body: PageView(
    physics: NeverScrollableScrollPhysics(),       
    controller: pageController,
    children: [
      Container(
        alignment: Alignment.center,
        child: Icon(
          Icons.bookmark_rounded,
          size: 56,
          color: Colors.amber[400],
        ),
      ),
      Container(
        alignment: Alignment.center,
        child: Icon(
          Icons.favorite_rounded,
          size: 56,
          color: Colors.red[400],
        ),
      ),
      Container(
        alignment: Alignment.center,
        child: Icon(
          Icons.email_rounded,
          size: 56,
          color: Colors.green[400],
        ),
      ),
      Container(
        alignment: Alignment.center,
        child: Icon(
          Icons.folder_rounded,
          size: 56,
          color: Colors.blue[400],
        ),
      ),
    ],
  ),
  bottomNavigationBar: WaterDropNavBar(
    backgroundColor: Colors.white,
    onItemSelected: (index) {
      setState(() {
        selectedIndex = index;
      });
      pageController.animateToPage(selectedIndex,
          duration: const Duration(milliseconds: 400),
          curve: Curves.easeOutQuad);
    },
    selectedIndex: selectedIndex,
    barItems: [
      BarItem(
        filledIcon: Icons.bookmark_rounded,
        outlinedIcon: Icons.bookmark_border_rounded,
      ),
      BarItem(
          filledIcon: Icons.favorite_rounded,
          outlinedIcon: Icons.favorite_border_rounded),
      BarItem(
        filledIcon: Icons.email_rounded,
        outlinedIcon: Icons.email_outlined,
      ),
      BarItem(
        filledIcon: Icons.folder_rounded,
        outlinedIcon: Icons.folder_outlined,
      ),
    ],
  ),
);

解决问题

Android 问题

某些安卓手机可能会有黑色导航栏，看起来不好看。建议使用 AnnotatedRegion<SystemUiOverlayStyle> 包裹 Scaffold 以更改该黑色导航栏的颜色为 WaterDropNavBar 的 backgroundColor。例如：

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white, 
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
  child: Scaffold(
    // code here
  )
);

iPhone 问题

没有滑动手势的 iPhone 可能会出现图标被推到下方的问题。可以提供一些 bottomPadding。例如：

bottomPadding: 8.0,

FAQ

如何更改高度？

高度必须保持不变，因为动画是垂直方向的。根据我的经验，60 是完美的。如果你觉得需要减少，请创建一个带有截图的问题，我会看看是否可以做些什么。

如何添加阴影？

可以使用 DecoratedBox 或 Container 包裹 WaterDropNavBar 并传递 BoxDecoration 到 decoration 属性中添加阴影。例如：

DecoratedBox(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        offset: Offset(0, 4),
        blurRadius: 8.0
      )
    ],
  ),
  child: WaterDropNavBar()
)

如何更改导航栏的圆角半径？

可以使用 ClipRRect 包裹 WaterDropNavBar 并传递 BorderRadius 到 borderRadius 属性中更改圆角半径。例如：

ClipRRect(
  borderRadius: const BorderRadius.vertical(
    top: Radius.circular(16),
  ),
  child: WaterDropNavBar()
)

希望这些信息能帮助你在 Flutter 项目中成功使用 water_drop_nav_bar 插件！如果有更多问题，请随时提问。