Android利用Badge组件实现未读消息小红点
作者:岛上码农 时间:2021-11-09 10:30:33
前言
在 App 的运营中,活跃度是一个重要的指标,日活/月活……为了提高活跃度,就发明了小红点,然后让强迫症用户“没法活”。
小红点虽然很讨厌,但是为了 KPI,程序员也不得不屈从运营同学的逼迫(讨好),得想办法实现。这一篇,来介绍一个徽标(Badge)组件,能够快速搞定应用内的小红点。
Badge 组件
Badge
组件被 Flutter 官方推荐,利用它让小红点的实现非常轻松,只需要2个步骤就能搞定。
1.引入依赖
在 pubspec.yaml
文件种引入相应版本的依赖,如下所示。
badges: ^2.0.3
2.将需要使用小红点的组件使用 Badge 作为上级组件,设置小红点的位置、显示内容、颜色(没错,也可以改成小蓝点)等参数,示例代码如下所示。
Badge(
badgeContent: Text('3'),
position: BadgePosition.topEnd(top: -10, end: -10),
badgeColor: Colors.blue,
child: Icon(Icons.settings),
)
position
可以设置徽标在组件的相对位置,包括右上角(topEnd
)、右下角(bottomEnd
)、左上角(topStart
)、左下角(bottomStart
)和居中(center
)等位置。并可以通过调整垂直方向和水平方向的相对位置来进行位置的细微调整。当然,Badge
组件考虑了很多应用场景,因此还有其他的一些参数:
elevation
:阴影偏移量,默认为2,可以设置为0消除阴影;gradient
:渐变色填充背景;toAnimate
:徽标内容改变后是否启用动效哦,默认有动效。shape
:徽标的形状,默认是原型,也可以设置为方形,设置为方形的时候可以使用borderRadius
属性设置圆角弧度。borderRadius
:圆角的半径。animationType
:内容改变后的动画类型,有渐现(fade)、滑动(slide)和缩放(scale)三种效果。showBadge
:是否显示徽标,我们可以利用这个控制小红点的显示与否,比如没有提醒的时候该值设置为false
即可隐藏掉小红点。
总的来说,这些参数能够满足所有需要使用徽标的场景了。
实例
我们来看一个实例,我们分别在导航栏右上角、内容区和底部导航栏使用了三种类型的徽标,实现效果如下。
其中导航栏的代码如下,这是 Badge
最简单的实现方式了。
AppBar(
title: const Text('Badge Demo'),
actions: [
Badge(
showBadge: _badgeNumber > 0,
padding: const EdgeInsets.all(4.0),
badgeContent: Text(
_badgeNumber < 99 ? _badgeNumber.toString() : '99+',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 11.0,
),
),
position: BadgePosition.topEnd(top: 4, end: 4),
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.message_outlined,
color: Colors.white,
),
),
),
],
),
内容区的徽标代码如下,这里使用了渐变色填充,动画形式为缩放,并且将徽标放到了左上角,注意如果使用了渐变色那么会覆盖 badgeColor
指定的背景色。
Badge(
showBadge: _badgeNumber > 0,
padding: const EdgeInsets.all(6.0),
badgeContent: Text(
_badgeNumber < 99 ? _badgeNumber.toString() : '99+',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 10.0,
),
),
position: BadgePosition.topStart(top: -10, start: -10),
badgeColor: Colors.blue,
animationType: BadgeAnimationType.scale,
elevation: 0.0,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red,
Colors.orange,
Colors.green,
],
),
child: Image.asset(
'images/girl.jpeg',
width: 200,
height: 200,
),
),
底部导航栏的代码如下所示,这里需要注意,Badge
组件会根据内容区的尺寸自动调节大小,底部导航栏的显示控件有限,推荐使用小红点(不用数字标识)即可。
BottomNavigationBar(items: [
BottomNavigationBarItem(
icon: Badge(
showBadge: _badgeNumber > 0,
padding: const EdgeInsets.all(2.0),
badgeContent: Text(
_badgeNumber < 99 ? _badgeNumber.toString() : '99+',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 11.0,
),
),
position: BadgePosition.topEnd(top: -4, end: -6),
animationType: BadgeAnimationType.fade,
child: const Icon(Icons.home_outlined)),
label: '首页',
),
const BottomNavigationBarItem(
icon: Icon(
Icons.star_border,
),
label: '推荐',
),
const BottomNavigationBarItem(
icon: Icon(
Icons.account_circle_outlined,
),
label: '我的',
),
]),
来源:https://juejin.cn/post/7188124857958137911
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Flutter适配深色模式的方法(DarkMode)
![](https://img.aspxhome.com/file/2023/3/119093_0s.gif)
Android获取短信验证码的实现方法
![](https://img.aspxhome.com/file/2023/3/106813_0s.png)
详解java WebSocket的实现以及Spring WebSocket
![](https://img.aspxhome.com/file/2023/5/59885_0s.png)
C#四舍五入(函数)用法实例
![](https://img.aspxhome.com/file/2023/4/100104_0s.png)
C# 开发step步骤条控件详解
![](https://img.aspxhome.com/file/2023/0/80040_0s.png)
Swagger及knife4j的基本使用详解
Android ScrollView 下嵌套 ListView 或 GridView出现问题解决办法
C#基础知识之new关键字介绍
![](https://img.aspxhome.com/file/2023/3/72493_0s.png)
Entity Framework主从表数据加载方式
Android编程实现将压缩数据库文件拷贝到安装目录的方法
HashMap的get()方法的NullPointerException问题
关于springboot 配置文件中属性变量引用方式@@解析
C# 对象持久化详解
![](https://img.aspxhome.com/file/2023/7/83357_0s.png)
利用kotlin实现一个打方块的小游戏实例教程
![](https://img.aspxhome.com/file/2023/4/111744_0s.gif)
C#实现鼠标移动到曲线图上显示值的方法
C#队列的简单使用
![](https://img.aspxhome.com/file/2023/9/96319_0s.png)
C#网络编程基础之进程和线程详解
![](https://img.aspxhome.com/file/2023/7/78147_0s.png)
cmd中javac和java使用及注意事项详解
![](https://img.aspxhome.com/file/2023/5/101925_0s.png)
SpringBoot 如何优雅的实现跨服务器上传文件的示例
![](https://img.aspxhome.com/file/2023/9/83039_0s.png)