Flutter底部导航栏带徽章插件bottom_navigation_badge的使用

BottomNavigationBadge 是一个由 westdabestdb 开发的 Flutter 类库，用于在底部导航栏中添加徽章（Badge）。通过该插件，您可以轻松为底部导航栏的每个选项卡添加带有文本或图标的徽章。

安装插件

首先，在您的项目中添加依赖项。打开项目的 pubspec.yaml 文件，并添加以下内容：

dependencies:
  bottom_navigation_badge: ^1.0.3

然后运行以下命令以安装依赖项：

flutter pub get

接下来，在 Dart 文件中导入插件：

import 'package:bottom_navigation_badge/bottom_navigation_badge.dart';

使用示例

以下是一个完整的示例，展示如何使用 bottom_navigation_badge 插件来为底部导航栏添加徽章。

import 'package:flutter/material.dart';
import 'package:bottom_navigation_badge/bottom_navigation_badge.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化徽章生成器
  BottomNavigationBadge badger = BottomNavigationBadge(
    backgroundColor: Colors.red, // 徽章背景颜色
    badgeShape: BottomNavigationBadgeShape.circle, // 徽章形状（圆形）
    textColor: Colors.white, // 文本颜色
    position: BottomNavigationBadgePosition.topRight, // 徽章位置（右上角）
    textSize: 8, // 文本大小
  );

  // 底部导航栏的选项列表
  List<BottomNavigationBarItem> items = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
    BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text("Notifications")),
    BottomNavigationBarItem(icon: Icon(Icons.face), title: Text("Profile")),
  ];

  // 当前选中的导航栏索引
  int _current = 0;

  // 添加徽章的方法
  void _addBadge(String content, int index) {
    setState(() {
      items = badger.setBadge(items, content, index); // 在指定索引处添加徽章
    });
  }

  // 移除指定索引的徽章
  void _removeBadge(int index) {
    setState(() {
      items = badger.removeBadge(items, index); // 移除指定索引的徽章
    });
  }

  // 移除所有徽章
  void _removeAllBadges() {
    setState(() {
      items = badger.removeAll(items); // 移除所有徽章
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("底部导航栏带徽章示例"),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 选择导航项
            Row(
              children: [
                Text("导航项: "),
                DropdownButton<int>(
                  value: items.indexWhere((item) => item == items[_current]),
                  items: items.map((item) {
                    return DropdownMenuItem<int>(
                      value: items.indexOf(item),
                      child: item.title,
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      _current = value!;
                    });
                  },
                ),
              ],
            ),
            // 输入徽章内容
            Row(
              children: [
                Text("徽章内容: "),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "输入徽章内容"),
                    controller: TextEditingController(),
                  ),
                ),
              ],
            ),
            // 按钮操作区域
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    // 获取用户输入的徽章内容
                    final content = TextEditingController().text;
                    if (content.isNotEmpty) {
                      _addBadge(content, items.indexOf(items[_current]));
                    }
                  },
                  child: Text("添加徽章"),
                ),
                ElevatedButton(
                  onPressed: () {
                    // 移除当前选中的导航项的徽章
                    _removeBadge(items.indexOf(items[_current]));
                  },
                  child: Text("移除徽章"),
                ),
                ElevatedButton(
                  onPressed: () {
                    // 移除所有导航项的徽章
                    _removeAllBadges();
                  },
                  child: Text("移除所有徽章"),
                ),
              ],
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _current,
        onTap: (index) {
          setState(() {
            _current = index;
          });
        },
        items: items,
      ),
    );
  }
}