文章目录
- 1. 概念介绍
- 2. 实现方法
- 3 示例代码
我们在上一章回中介绍了WebView组件相关的内容,本章回中将介绍如何在图标旁边添加小红点.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
在实际项目中有时候需要在图标旁边显示小红点,而且小红点内还有数字,比如购物车图标显示小红点表示有商品添加到购物车中,小红点内的数字就是购物车中商品的数
量。本章回中将介绍如何在图标旁边添加小红点。
2. 实现方法
在Android或者IOS原生开发中,如果想实现图标旁边的小红点就需要自定义View。在Flutter中就不需要这么做了,因为官方已经给我们封装了相应的组件:Badge.
我们直接拿来使用就可以在图标旁边添加小红点。和其它的组件一样,Badge组件提供了相关的属性来控制自己,下面是常用的属性:
- label属性:用来控制红点中显示的内容;
- backgroundColor属性:用来控制红点的颜色,默认是红色;
- textColor属性:用来控制红点中文字的颜色,默认是白色;
- alignment属性:用来控制红点的位置,默认传值是topRight;
- child属性:用来控制红点的宿主,就是说在哪个组件旁边显示红点;
只通过文字介绍这些属性比较抽象,在后面的小节中,我们将通过具体的代码来演示Badge组件的使用方法。