写点什么

【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (二)

发布于: 刚刚
【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (二)

      小菜前两天刚学习了一下自定义底部状态栏,现补充固定凸出中间 Item 位的样式,并生成插件发不到 Pub 中。

补充样式 (中间位凸出)

      小菜补充一种中间位凸出样式,item 总数为奇数时中间位才会凸出,而偶数时不会凸出,默认其他 item 为普通 nomal 样式,支持图片或 icon 以及文字变色等效果。


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



      小菜在前几种类型中配置效果主要是在 NavigationItem 中实现的,而固定凸出位样式只有在中间显示,所以小菜准备在 ACEBottomNavigationBar 中进行配置,优先判断 item 总数,再将中间位凸出展示。其中小菜偷个懒,因为只有在中间位展示,所以在向子 NavigationItemtype 类型是传递的是 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 中建议添加邮箱,之后删除无用的缓存文件;再次执行即可。



问题二:pub finished with exit code 1

      在执行第二步 flutter packages pub publish 遇到 Failed to upload the package. 因为没有错误提醒,这可愁坏小菜了,不知该从何处入手;



      官网建议从网络环境入手,但是小菜网络是正常访问的;之后又请教了一下网上大神,建议在国内先把国内镜像关掉,再尝试终于成功了,幸福感油然而生啊!




      小菜第一次尝试发布插件,还有很多不完善的地方,会努力维护,有不对的地方请多多指点。


      GitHub 源码      Pub 仓库


来源:阿策小和尚

发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (二)