美文网首页
flutter制作微信-底部导航栏设置Badge

flutter制作微信-底部导航栏设置Badge

作者: hi李昊天 | 来源:发表于2019-10-18 03:37 被阅读0次

可以用一下badges 这个组件
详细地址: https://pub.dev/packages/badges
使用方法很简单

  BottomNavigationBarItem(
        title: Text("消息"),
        icon: Badge(
          position: BadgePosition(left: 18, top: -8),
          shape: BadgeShape.circle,
          padding: EdgeInsets.all(3),
          borderRadius: 100,
          badgeContent: Container(
            child:
                Text("99", style: TextStyle(color: Colors.white, fontSize: 12)),
          ),
          child: ImageIcon(AssetImage("assets/img/tabs/message.png")),
        )),

注意 如果用IOS风格(CupertinoTabBar); 会在每次切换的时候重新定位 有一个抖动的过程! 目前这个问题还未解决 所以还是使用的BottomNavigationBar

相关文章

网友评论

      本文标题:flutter制作微信-底部导航栏设置Badge

      本文链接:https://www.haomeiwen.com/subject/nfvbmctx.html