亲宝软件园·资讯

展开

Android利用Badge组件实现未读消息小红点

岛上码农 人气:0

前言

在 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 组件考虑了很多应用场景,因此还有其他的一些参数:

总的来说,这些参数能够满足所有需要使用徽标的场景了。

实例

我们来看一个实例,我们分别在导航栏右上角、内容区和底部导航栏使用了三种类型的徽标,实现效果如下。

其中导航栏的代码如下,这是 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: '我的',
  ),
]),

总结

本篇介绍了使用 Badge 组件实现小红点徽标组件。可以看到,Badge 组件的使用非常简单,相比我们自己从零写一个 Badge 组件来说,使用它可以让我们省时省力、快速地完成运营同学要的小红点。本篇源码已上传至:实用组件相关代码

加载全部内容

相关教程
猜你喜欢
用户评论