Flutter Widget 之Badges

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

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

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

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

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

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

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

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

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

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

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

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

 positon: BadgePosition.topEnd(),

 positon: BadgePosition.bottomStart(),

 positon: BadgePosition.bottomEnd(),

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

animationType: BadgeAnimationType.slide

缩放

animationType: BadgeAnimationType.scale

淡入淡出

animationType: BadgeAnimationType.fade

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

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

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

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

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

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

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

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