如何使用Firebase Flutter为特定用户显示未读消息数量

Web前端实现 #

纯CSS+HTML基础实现 #

给导航项嵌套角标元素，通过绝对定位固定在右上角：

<div class="nav-item">
  <span>消息</span>
  <span class="badge">3</span>
</div>

对应的CSS样式：

.nav-item {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
}
.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #ff4444;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

如果只需要红点（无数字），可以删除角标内容，把宽高调整为8px左右即可。

前端框架集成（以Vue为例） #

封装通用角标组件，方便复用：

<template>
  <div class="badge-wrap" v-if="count > 0">
    <span class="badge-text">{{ count > 99 ? '99+' : count }}</span>
  </div>
</template>
<script setup>
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
</script>
<style scoped>
.badge-wrap {
  position: absolute;
  top: -5px;
  right: -5px;
}
.badge-text {
  background: #f5222d;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}
</style>

在导航项中引入使用：

<div class="nav-item" style="position: relative;">
  <router-link to="/messages">消息</router-link>
  <Badge :count="unreadCount" />
</div>

Android原生实现 #

Material Design组件快捷实现 #

针对BottomNavigationView的导航项，直接调用官方API设置角标：

val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
// 获取或创建指定导航项的角标
val badge = bottomNav.getOrCreateBadge(R.id.nav_messages)
badge.number = 3
badge.badgeTextColor = Color.WHITE
badge.backgroundColor = Color.RED
// 仅显示红点的话，设置number为0并保持可见
badge.isVisible = true
badge.number = 0
badge.badgeGravity = BadgeDrawable.TOP_END

自定义View手动绘制 #

如果是自定义导航按钮，可在onDraw方法中添加角标绘制逻辑：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (unreadCount > 0) {
        Paint paint = new Paint();
        // 绘制红色圆形背景
        paint.setColor(Color.RED);
        canvas.drawCircle(getWidth() - 15, 15, 10, paint);
        // 绘制白色数字
        paint.setColor(Color.WHITE);
        paint.setTextSize(12);
        paint.setTextAlign(Paint.Align.CENTER);
        String text = unreadCount > 99 ? "99+" : String.valueOf(unreadCount);
        canvas.drawText(text, getWidth() - 15, 18, paint);
    }
}

iOS原生实现 #

UITabBarItem自带属性实现 #

直接给TabBar的导航项设置角标：

if let tabBarItems = tabBarController?.tabBar.items {
    let messagesItem = tabBarItems[1]
    messagesItem.badgeValue = "3"
    messagesItem.badgeColor = .red
    // 仅显示红点时，设置badgeValue为空字符串
    messagesItem.badgeValue = ""
}

自定义角标视图 #

给自定义导航按钮添加角标子视图：

// 创建红点视图
let badgeView = UIView()
badgeView.frame = CGRect(x: button.frame.width - 18, y: 5, width: 16, height: 16)
badgeView.backgroundColor = .red
badgeView.layer.cornerRadius = 8
button.addSubview(badgeView)

// 添加数字标签
let label = UILabel(frame: badgeView.bounds)
label.text = "3"
label.textColor = .white
label.font = UIFont.systemFont(ofSize: 10)
label.textAlignment = .center
badgeView.addSubview(label)

内容的提问来源于stack exchange，提问作者Nams