Flutter——最详细(Badge)使用教程

背景

主要常用于组件叠加上圆点提示;
使用场景,消息数量提示,消息红点提示

属性 作用
backgroundColor 红点背景色
smallSize 设置红点大小
isLabelVisible 是否显示
offset 设置红点位置
alignment 设置红点位置
child 设置底部组件

代码块

class BadgePage extends StatelessWidget {
  const BadgePage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return const Wrap(
      spacing: 20,
      children: [
        Badge(
          backgroundColor: Colors.redAccent,
          smallSize: 10,
          child: Icon(Icons.update,size: 36,color: Colors.blue,),
        ),
        Badge(
          backgroundColor: Colors.redAccent,
          smallSize: 10,
          label: Text('99'),
          isLabelVisible: false,
          largeSize: 14,
          child: Icon(Icons.update,size: 36,color: Colors.blue,),
        ),
        Badge(
          backgroundColor: Colors.redAccent,
          smallSize: 10,
          label: Text('99'),
          largeSize: 14,
          child: Icon(Icons.update,size: 36,color: Colors.blue,),
        ),
        Badge(
          backgroundColor: Colors.red,
          label: const Text('99'),
          smallSize: 20,
          textStyle: const TextStyle(fontSize: 8, color: Colors.red),
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          largeSize: 14,
          offset:  Offset(-4, -4),
          alignment: Alignment.bottomRight,
          child: const Icon(Icons.message, size: 36, color: Colors.indigo),
        ),
      ],
    );
  }
}

效果图

在这里插入图片描述

上一篇:VMware创建新虚拟机教程(保姆级别)


下一篇:JVM详解