Flutter 专题30 图解自定义底部状态栏 ACEBottomNavigationBar #yyds干货盘点# _Navigation

少年辛苦终身事，莫向光阴惰寸功。这篇文章主要讲述Flutter 专题30 图解自定义底部状态栏 ACEBottomNavigationBar #yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜前两天刚学习了一下自定义底部状态栏，现补充固定凸出中间 Item 位的样式，并生成插件发不到 Pub 中。
补充样式 (中间位凸出)
小菜补充一种中间位凸出样式，item 总数为奇数时中间位才会凸出，而偶数时不会凸出，默认其他 item 为普通 nomal 样式，支持图片或 icon 以及文字变色等效果。

enum ACEBottomNavigationBarType { normal,// 普通类型，选中变色，样式不变 zoom,// 图片或icon变大，此时隐藏文字，支持变色 zoomout,// 图片或icon变大，并凸出显示，文字显示，支持变色 zoomoutonlypic,// 图片或icon变大，并凸出显示，文字隐藏 protruding,// 中间位凸出显示，其余位为普通类型 }

文章图片

小菜在前几种类型中配置效果主要是在 NavigationItem 中实现的，而固定凸出位样式只有在中间显示，所以小菜准备在 ACEBottomNavigationBar 中进行配置，优先判断 item 总数，再将中间位凸出展示。其中小菜偷个懒，因为只有在中间位展示，所以在向子 NavigationItem 传 type 类型是传递的是 nomel 类型，只需判断中间位是否展示即可。

Widget protrudingWid() { Widget proWid; if (widget.items.length % 2 == 0) { proWid = Container(width: 0.0, height: 0.0); } else { proWid = Positioned.fill( top: -30, child: Container( child: Padding( padding: const EdgeInsets.only(bottom: 10), child: Stack(alignment: Alignment.center, children: < Widget> [ SizedBox( height: 60.0, width: 60.0, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: widget.protrudingColor != null ? widget.protrudingColor : Colors.white), child: Padding( padding: const EdgeInsets.all(0.0), child: protrudingItemWid( widget.items[protrudingIndex])))) ])))); } return proWid; }Widget protrudingItemWid(NavigationItemBean item) { Widget itemWidget; if (item.image != null) { itemWidget = GestureDetector( child: Image(image: item.image), onTap: () { widget.onTabChangedListener(protrudingIndex); _setSelected(item.key); }); } else { itemWidget = IconButton( highlightColor: Colors.transparent, splashColor: Colors.transparent, alignment: Alignment(0, 0), icon: Icon( item.icon, size: 40.0, color: item.iconUnSelectedColor, ), onPressed: () { widget.onTabChangedListener(protrudingIndex); _setSelected(item.key); }); } return itemWidget; }

文章图片

发布 Pub 插件
小菜共整理了五种类型，基本可以实现小菜日常需要，尝试生成第一版插件并发布到 Pub 仓库。
1. 创建插件 plugin File -> New -> New Flutter Project... -> Flutter Plugin 实现方式与 Android 无异，主要是在 lib 中实现功能，并在 example 中实现基本的调用，之后双传到 git 上；

文章图片

2. 发布 Pub 仓库按照官网介绍，其实很方便，但其中有很多需要注意的地方，前期准备外网环境与谷歌邮箱账号，小菜接下来详细介绍遇到的问题。

文章图片

问题一：完善信息与包大小在执行第一步 flutter packages pub publish --dry-run 遇到的 Warning 是基本信息不完整以及包大于 100M，于是在 pubspec.yaml 文件中补充 author/homepage 信息，注意 author 中建议添加邮箱，之后删除无用的缓存文件；再次执行即可。