快捷導(dǎo)航

Android利用Badge組件實(shí)現(xiàn)未讀消息小紅點(diǎn)

更新時(shí)間：2023年01月14日 08:26:06 作者：島上碼農(nóng)

在?App?的運(yùn)營(yíng)中，活躍度是一個(gè)重要的指標(biāo)，日活/月活……為了提高活躍度，就發(fā)明了小紅點(diǎn)。這一篇，來(lái)介紹一個(gè)徽標(biāo)（Badge）組件，能夠快速搞定應(yīng)用內(nèi)的小紅點(diǎn)，希望對(duì)大家有所幫助

前言

在 App 的運(yùn)營(yíng)中，活躍度是一個(gè)重要的指標(biāo)，日活/月活……為了提高活躍度，就發(fā)明了小紅點(diǎn)，然后讓強(qiáng)迫癥用戶“沒(méi)法活”。

小紅點(diǎn)雖然很討厭，但是為了 KPI，程序員也不得不屈從運(yùn)營(yíng)同學(xué)的逼迫（討好），得想辦法實(shí)現(xiàn)。這一篇，來(lái)介紹一個(gè)徽標(biāo)（Badge）組件，能夠快速搞定應(yīng)用內(nèi)的小紅點(diǎn)。

Badge 組件

Badge 組件被 Flutter 官方推薦，利用它讓小紅點(diǎn)的實(shí)現(xiàn)非常輕松，只需要2個(gè)步驟就能搞定。

1.引入依賴

在 pubspec.yaml文件種引入相應(yīng)版本的依賴，如下所示。

badges: ^2.0.3

2.將需要使用小紅點(diǎn)的組件使用 Badge 作為上級(jí)組件，設(shè)置小紅點(diǎn)的位置、顯示內(nèi)容、顏色（沒(méi)錯(cuò)，也可以改成小藍(lán)點(diǎn)）等參數(shù)，示例代碼如下所示。

Badge(
  badgeContent: Text('3'),
  position: BadgePosition.topEnd(top: -10, end: -10),
  badgeColor: Colors.blue,
  child: Icon(Icons.settings),
)

position可以設(shè)置徽標(biāo)在組件的相對(duì)位置，包括右上角（topEnd）、右下角（bottomEnd）、左上角（topStart）、左下角（bottomStart）和居中（center）等位置。并可以通過(guò)調(diào)整垂直方向和水平方向的相對(duì)位置來(lái)進(jìn)行位置的細(xì)微調(diào)整。當(dāng)然，Badge 組件考慮了很多應(yīng)用場(chǎng)景，因此還有其他的一些參數(shù)：

elevation：陰影偏移量，默認(rèn)為2，可以設(shè)置為0消除陰影；
gradient：漸變色填充背景；
toAnimate：徽標(biāo)內(nèi)容改變后是否啟用動(dòng)效哦，默認(rèn)有動(dòng)效。
shape：徽標(biāo)的形狀，默認(rèn)是原型，也可以設(shè)置為方形，設(shè)置為方形的時(shí)候可以使用 borderRadius 屬性設(shè)置圓角弧度。
borderRadius：圓角的半徑。
animationType：內(nèi)容改變后的動(dòng)畫(huà)類型，有漸現(xiàn)（fade）、滑動(dòng)（slide）和縮放（scale）三種效果。
showBadge：是否顯示徽標(biāo)，我們可以利用這個(gè)控制小紅點(diǎn)的顯示與否，比如沒(méi)有提醒的時(shí)候該值設(shè)置為 false 即可隱藏掉小紅點(diǎn)。

總的來(lái)說(shuō)，這些參數(shù)能夠滿足所有需要使用徽標(biāo)的場(chǎng)景了。

實(shí)例

我們來(lái)看一個(gè)實(shí)例，我們分別在導(dǎo)航欄右上角、內(nèi)容區(qū)和底部導(dǎo)航欄使用了三種類型的徽標(biāo)，實(shí)現(xiàn)效果如下。

其中導(dǎo)航欄的代碼如下，這是 Badge 最簡(jiǎn)單的實(shí)現(xiàn)方式了。

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,
        ),
      ),
    ),
  ],
),

內(nèi)容區(qū)的徽標(biāo)代碼如下，這里使用了漸變色填充，動(dòng)畫(huà)形式為縮放，并且將徽標(biāo)放到了左上角，注意如果使用了漸變色那么會(huì)覆蓋 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,
  ),
),

底部導(dǎo)航欄的代碼如下所示，這里需要注意，Badge 組件會(huì)根據(jù)內(nèi)容區(qū)的尺寸自動(dòng)調(diào)節(jié)大小，底部導(dǎo)航欄的顯示控件有限，推薦使用小紅點(diǎn)（不用數(shù)字標(biāo)識(shí)）即可。

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: '首頁(yè)',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.star_border,
    ),
    label: '推薦',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.account_circle_outlined,
    ),
    label: '我的',
  ),
]),

總結(jié)

本篇介紹了使用 Badge 組件實(shí)現(xiàn)小紅點(diǎn)徽標(biāo)組件?？梢钥吹?，Badge 組件的使用非常簡(jiǎn)單，相比我們自己從零寫(xiě)一個(gè) Badge 組件來(lái)說(shuō)，使用它可以讓我們省時(shí)省力、快速地完成運(yùn)營(yíng)同學(xué)要的小紅點(diǎn)。本篇源碼已上傳至：實(shí)用組件相關(guān)代碼。

到此這篇關(guān)于Android利用Badge組件實(shí)現(xiàn)未讀消息小紅點(diǎn)的文章就介紹到這了,更多相關(guān)Android Badge組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: