Flutter 组件集录 | Badge 标记组件

一、Badge 组件的基本使用

Badge 是一种 Material 风格的组件，能够在 child 组件的上层增加符号物。底层构建逻辑依赖 Stack 组件进行叠放，以及 Positioned 组件进行定位。该组件已收录入 FlutterUnit ，能够检查 Badge 的示例源码。

Badge	Badge

1. Badge 展现圆点符号

Badge 最根底的能力是在 child 组件左上角展现一个小圆点，smallSize 能够设置圆点直径；backgroundColor 设置原点色彩。效果如下：

标题	布局剖析

Badge(
  backgroundColor: Colors.redAccent,
  smallSize: 10,
  child: Icon(Icons.update,size: 36,color: Colors.green,),
),

2. Badge 展现文字符号

经过 label 特点能够自定义右上角的组件，如下展现一个赤色的文字气泡。 其中 largeSize 特点只要在 label 非空时起效果，用于决定气泡的高度：

标题	布局剖析

Badge(
  backgroundColor: Colors.red,
  label: Text('99'),
  largeSize: 14,
  padding: EdgeInsets.symmetric(horizontal: 8,vertical: 2),
  textStyle: TextStyle(fontSize: 8,color: Colors.red),
  child: Icon(Icons.message,size: 36,color: Colors.indigo,),
),

3. Badge 的偏移量

offset 用于操控符号的偏移；alignment 用于操控符号在区域内的对其方法；如下图中第三个，经过 Alignment.bottomRight 让符号展现在右下角。

class BadgeDemo3 extends StatelessWidget {
  const BadgeDemo3({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final List<String> info = ['默许偏移和对齐', '偏移-4,-4', '偏移-2,-2;右下角'];
    final List<Offset?> offsets = [
      null,
      const Offset(-4, -4),
      const Offset(-2, -2)
    ];
    final List<Alignment?> alignments = [null, null, Alignment.bottomRight];
    return Wrap(
      spacing: 40,
      children: info
          .asMap()
          .keys
          .map((int i) => _buildShowItem(info[i], offsets[i], alignments[i]))
          .toList(),
    );
  }
  Widget _buildShowItem(String info, Offset? offset, Alignment? alignment) {
    return Wrap(
      spacing: 8,
      direction: Axis.vertical,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: [
        Badge(
          backgroundColor: Colors.red,
          label: const Text('99'),
          textStyle: const TextStyle(fontSize: 8, color: Colors.red),
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          largeSize: 14,
          offset: offset,
          alignment: alignment,
          child: const Icon(Icons.message, size: 36, color: Colors.indigo),
        ),
        Text(
          info,
          style: const TextStyle(fontSize: 10, color: Colors.grey),
        )
      ],
    );
  }
}

到这儿， Badge 组件的一切特点就介绍完了，作为一个 StatelessWidget 它的使用还是十分简略的。下面来瞄一眼其中的源码实现。

二、Badge 组件源码剖析

它作为一个 StatelessWidget ，最中心的使命是在 build 方法中基于特点构建组件。

1. isLabelVisible 的效果

如下在一开始会校验 isLabelVisible，如果为 false 会直接返回 child ，不做任何处理。所以不会展现符号：

2. BadgeTheme 主题供给的默许值

接下来会经过上下文获取 badgeTheme ，和 _BadgeDefaultsM3 中的 defaults 主题。从成效上来看，优先级是:

传入特点 > BadgeTheme > _BadgeDefaultsM3

其中会经过 Container 的装修特点来创立符号组件 badge ：

3. 终究的构建逻辑

如下所示，当 child 非空时，终究会经过 Stack 组件将 child 和符号组件进行叠放。其中 _Badge 组件用于对其和偏移的处理。

三、Badge 组件小结

总的来说，Badge 是一个小巧简略的组件，能够让你快速的在 child 组件上叠放一个符号组件，而且能够操控符号的偏移量和对齐方法。 下面是 Badge 的特点汇总，希望能够协助你更好地知道。 那本文就到这儿，下次再见 ~