Flutter Widget 之Badges

曾经有大约72个未接来电并看到其中一个红色标记提醒你必须回电的人?

ezgif.com-gif-maker.gif

这些赛色缤纷的弹出窗口非常适合在很小的空间内为哟哦那个户提供一些信息。

因为我要回那些未接来电,你花时间知道,我怎样才能将那些漂亮的小标记添加到我的应用程序中?

让我们看一个小部件,比如说,这个图标小部件

将小部件包裹在一个Badge中,给些标记内容,通常是文本或图标你有一个标记了,默认情况下,标记是红色的

Badge(
    child: Icon(
        bagdeContent: Text("9"),
        Icons.access_time,  
    ),
)

image.png

但是你可以提供标记颜色以作更改

Badge(
    badgeContent: Text("9"),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
)

image.png

添加文字样式以更改文字颜色

Bagde(
    badgeContene: Text(
        "9",
        style: const TextStyle(color: Colors.white),
    ),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
)

image.png

设置位置值来调整标记的位置

Badge(
    badgeContent: Text(
        "9",
        style: TextStyle(color: Colors.white),
    ),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
    positon: BadgePosition.topStart(),
)

image.png

 positon: BadgePosition.topEnd(),

image.png

 positon: BadgePosition.bottomStart(),

image.png

 positon: BadgePosition.bottomEnd(),

image.png

如果默认动画不太合你的口味,这里有三种不同风格
滑动

animationType: BadgeAnimationType.slide

ezgif.com-gif-maker.gif
缩放

animationType: BadgeAnimationType.scale

ezgif.com-gif-maker (2).gif
淡入淡出

animationType: BadgeAnimationType.fade

ezgif.com-gif-maker (4).gif

当你使用时,也尝试为动画持续时间设置主题

Badge(
    badgeContent: Text(
        "9",
        style: TextStyle(color: Colors.white),
    ),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
    animationType: BadgeAnimationType.fade,
    animationDuration: Duration(mioolseconds: 250),
)

ezgif.com-gif-maker (5).gif

要完全停用动画,将toAnimated设置为false

Badge(
    badgeContent: Text(
        "9",
        style: TextStyle(color: Colors.white),
    ),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
    toAnimate: false,
)

ezgif.com-gif-maker (6).gif

最后,要隐藏标记家将showBadge设置为false

Badge(
    badgeContent: Text(
        "9",
        style: TextStyle(color: Colors.white),
    ),
    child: Icon(
        Icons.access_time,
    ),
    badgeColor: Colors.blue,
    showBadge: _voiceemails > 0 ? true :false,
)

image.png

如果想了解有关Badges 的内容,或者关于Flutter的其他功能,请访问pub.dev

原文翻译自视频:视频地址

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容