第一百三十八回 如何在图标旁边添加小红点

我们在上一章回中介绍了WebView组件相关的内容，本章回中将介绍 如何在图标旁边添加小红点.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在实际项目中有时候需要在图标旁边显示小红点，而且小红点内还有数字，比如购物车图标显示小红点表示有商品添加到购物车中，小红点内的数字就是购物车中商品的数量。本章回中将介绍如何在图标旁边添加小红点。

实现方法

在Android或者IOS原生开发中，如果想实现图标旁边的小红点就需要自定义View。在Flutter中就不需要这么做了，因为官方已经给我们封装了相应的组件:Badge.我们直接拿来使用就可以在图标旁边添加小红点。和其它的组件一样，Badge组件提供了相关的属性来控制自己，下面是常用的属性：

• label属性:用来控制红点中显示的内容；
• backgroundColor属性:用来控制红点的颜色,默认是红色;
• textColor属性:用来控制红点中文字的颜色,默认是白色;
• alignment属性:用来控制红点的位置，默认传值是topRight；
• child属性:用来控制红点的宿主，就是说在哪个组件旁边显示红点；

只通过文字介绍这些属性比较抽象，在后面的小节中，我们将通过具体的代码来演示Badge组件的使用方法。

示例代码

Badge(
  ///红点中显示的内容
  label: Text('3'),
  ///默认红底白字
  backgroundColor: Colors.purpleAccent,
  textColor: Colors.green,
  ///红点的位置,默认topRight
  alignment: Alignment.topLeft,
  ///红点的偏移，负值为向左和上，正值为向右和下
  offset: Offset(20.0, -10.0),
  ///在哪个组件右上角显示红点
  child: Icon(Icons.notifications),
)

badges.Badge(
  position: badges.BadgePosition.topEnd(top: -10,end: -15),
  onTap: () => debugPrint('onTap'),
  badgeContent: const Text('3'),
  badgeAnimation: const badges.BadgeAnimation.scale(animationDuration: Duration(seconds: 2)),
  badgeStyle: const badges.BadgeStyle(
    shape: badges.BadgeShape.twitter,
  ),
  child: const Icon(Icons.notifications),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在上面的代码中，我们在通知图标上显示了小红点，代码中的关键位置都添加了注释，以方便大家理解。此外，我们在代码中还使用三方包:Badges.该包也可以在图标旁边添加小红点。不过它在Badge组件的基础上做了很多扩展，比如响应点击事件，修改红点的样式，以动画的形式显示红点。上面示例代码中演示了该包的使用方法。

编译并且运行上面的程序，就可以在页面中看到通知图标以及它右上角的小红点。我在这里就不演示程序的运行结果了，建议大家自己动手去实战。

看官们，与"如何在图标旁边添加小红点"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!