如何实现组件旁边的小红点功能

标签：购物车 旁边 小红点 组件 属性 图标

文章目录

• 1 概念介绍
• 2 实现方法
• 3 示例代码

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

1 概念介绍

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

2 实现方法

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

• label属性:用来控制红点中显示的内容；
• backgroundColor属性:用来控制红点的颜色,默认是红色;
• textColor属性:用来控制红点中文字的颜色,默认是白色;
• alignment属性:用来控制红点的位置，默认传值是topRight；
• child属性:用来控制红点的宿主，就是说在哪个组件旁边显示红点；
  只通过文字介绍这些属性比较抽象，在后面的小节中，我们将通过具体的代码来演示Badge组件的使用方法。

3 示例代码

标签：购物车,旁边,小红点,组件,属性,图标
From： https://blog.csdn.net/talk_8/article/details/143662804