Badge 徽标

Badge组件用于在元素角落显示徽标或计数，常用于消息提醒、未读数量等场景。

何时使用

• 显示消息通知数量
• 标记重要信息或状态
• 显示未读消息数
• 用于图标或按钮上的状态标记

代码演示

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

class BadgePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BadgePageState();
}

class _BadgePageState extends State<BadgePage> {
  @override
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(
        title: Text("Badge 徽标"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            DemoBlock(
              title: "基础使用",
              child: Wrap(
                spacing: 10,
                children: [
                  AntBadge(
                    count: 5,
                    child: Icon(Icons.notifications),
                  ),
                  AntBadge(label: Text("新"), child: Icon(Icons.notifications)),
                  AntBadge(child: Icon(Icons.notifications)),
                ],
              ),
            ),
            DemoBlock(
              title: "独立使用",
              child: Wrap(
                children: [
                  AntBadge(
                      label: Text("更新啦"), child: Icon(Icons.notifications)),
                ],
              ),
            ),
            DemoBlock(
              title: "独立使用",
              child: Wrap(
                spacing: 10,
                children: [
                  AntBadge(count: 5),
                  AntBadge(label: Text("更新啦！")),
                ],
              ),
            ),
            DemoBlock(
              title: "自定义颜色和偏移量",
              child: Wrap(
                spacing: 10,
                children: [
                  AntBadge(
                      alignment: Alignment.bottomLeft,
                      child: Icon(Icons.notifications)),
                  AntBadge(
                      alignment: Alignment.topLeft,
                      child: Icon(Icons.notifications)),
                  AntBadge(
                      alignment: Alignment.topRight,
                      child: Icon(Icons.notifications)),
                  AntBadge(
                      alignment: Alignment.bottomRight,
                      child: Icon(Icons.notifications)),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

API

属性	说明	类型	默认值
backgroundColor	背景色	Color?	null
label	徽标内容	Widget?	null
labelText	徽标内容文本	String?	null
count	徽标数字	int?	null
maxCount	最大数	int?	999
alignment	对齐方式	Alignment?	null
offset	偏移	Offset?	null
textStyle	文本样式	TextStyle?	null
visible	是否可见	bool?	true
child	子组件	Widget?	null

优先级说明

1. label、labelText、count三个属性中，按顺序优先使用第一个有值的属性：
   • 如果设置了[label]，则直接使用该Widget作为徽标内容
   • 否则如果设置了[labelText]，则使用该文本创建Text作为徽标内容
   • 否则如果设置了[count]，则显示数字，超过[maxCount]时显示"{maxCount}+"