Flutter 组件集录 | Badge 标记组件

一、Badge 组件的基本使用

Badge 是一种 Material 风格的组件,可以在 child 组件的上层添加标记物。底层构建逻辑依赖 Stack 组件进行叠放,以及 Positioned 组件进行定位。该组件已收录入 FlutterUnit ,可以查看 Badge 的示例源码。

Badge Badge

1. Badge 展示圆点标记

Badge 最基础的能力是在 child 组件左上角展示一个小圆点,smallSize 可以设置圆点直径;backgroundColor 设置原点颜色。效果如下:

标题 布局分析
属性名 类型 介绍 备注
backgroundColor Color? 背景色 默认 BadgeTheme 或 ColorScheme.errorColor
widget Widget? 子组件 -
smallSize double? label 为空时直径 默认 BadgeTheme 或 6
isLabelVisible bool 是否显示 -
dart 复制代码
Badge(
  backgroundColor: Colors.redAccent,
  smallSize: 10,
  child: Icon(Icons.update,size: 36,color: Colors.green,),
),

2. Badge 展示文字标记

通过 label 属性可以自定义右上角的组件,如下展示一个红色的文字气泡。 其中 largeSize 属性只要在 label 非空时起作用,用于决定气泡的高度:

标题 布局分析
属性名 类型 介绍 备注
label Widget? 标记组件 -
largeSize double? label 非空时高度 默认 BadgeTheme 或 16
padding EdgeInsetsGeometry? 文字内边距 默认 BadgeTheme 或 左右 4
textStyle TextStyle? 文字样式 默认 BadgeTheme 或 TextTheme.labelSmall
dart 复制代码
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 让标记展示在右下角。

属性名 类型 介绍 备注
offset Offset? 偏移量 BadgeTheme 或 Offset(4, -4) 或 Offset(-4, -4)
alignment AlignmentGeometry? 对其方式 默认 BadgeTheme 或 AlignmentDirectional.topEnd
dart 复制代码
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 的属性汇总,希望可以帮助你更好地认识。 那本文就到这里,下次再见 ~

属性名 类型 介绍 备注
backgroundColor Color? 背景色 默认 BadgeTheme 或 ColorScheme.errorColor
widget Widget? 子组件 -
smallSize double? label 为空时直径 默认 BadgeTheme 或 6
isLabelVisible bool 是否显示 -
label Widget? 标记组件 -
largeSize double? label 非空时高度 默认 BadgeTheme 或 16
padding EdgeInsetsGeometry? 文字内边距 默认 BadgeTheme 或 左右 4
textStyle TextStyle? 文字样式 默认 BadgeTheme 或 TextTheme.labelSmall
offset Offset? 偏移量 BadgeTheme 或 Offset(4, -4) 或 Offset(-4, -4)
alignment AlignmentGeometry? 对其方式 默认 BadgeTheme 或 AlignmentDirectional.topEnd
相关推荐
前行的小黑炭1 小时前
Android Compose :初步了解一下生命周期,对比原生android
android·kotlin·app
湖南人爱科技有限公司2 小时前
RaPhp和Python某音最新bd-ticket-guard-client-data加密算法解析(视频评论)
android·python·php·音视频·爬山算法·raphp
守城小轩6 小时前
Chromium 138 编译指南 - Android 篇:从Linux版切换到Android版(六)
android·chrome·指纹浏览器·浏览器开发·超级浏览器
守城小轩6 小时前
Chromium 138 编译指南 - Android 篇:环境搭建与准备(一)
android·chrome·指纹浏览器·浏览器开发
消失的旧时光-19436 小时前
Kotlin when 用法完整分享
android·开发语言·kotlin
程序员老刘8 小时前
2025年Flutter状态管理新趋势:AI友好度成为技术选型第一标准
flutter·ai编程·客户端
顾林海8 小时前
Android编译插桩黑科技:ReDex带你给App"瘦个身,提个速"
android·面试·性能优化
maki0779 小时前
VR大空间资料 04 —— VRAF使用体验和源码分析
android·vr·虚幻·源码分析
消失的旧时光-194311 小时前
Kotlin 判空写法对比与最佳实践
android·java·kotlin