badges

这是一个用于创建徽章的Flutter包。徽章可为任意组件添加附加标记。例如，表示一个购物车里的项目数。

安装

在 pubspec.yaml 中添加依赖：

dependencies:
  badges: ^2.0.2

import 'package:badges/badges.dart';

基本用法

    Badge(
      badgeContent: Text('3'),
      child: Icon(Icons.settings),
    )

动画


`BadgeAnimationType.slide`	`BadgeAnimationType.scale`	`BadgeAnimationType.fade`

Chip

有时候你想使用 Chip 组件，但是它太大了，即使你把 padding 设置为 0。这正是 Badge 的用武之地。

    Chip(
      padding: EdgeInsets.all(0),
      backgroundColor: Colors.deepPurple,
      label: Text('BADGE', style: TextStyle(color: Colors.white)),
    ),
    Badge(
      toAnimate: false,
      shape: BadgeShape.square,
      badgeColor: Colors.deepPurple,
      borderRadius: BorderRadius.circular(8),
      badgeContent: Text('BADGE', style: TextStyle(color: Colors.white)),
    ),

自定义用法

这有一些选项可允许更多的控制：

属性	描述
`Widget badgeContent`	徽章的内容，通常是 `Text` 或 `Icon`
`Color badgeColor`	徽章的背景色
`Widget child`	主组件。默认在红色徽章的下方。通常是 `Icon` 、 `IconButton` 、 `Text` 或按钮
`double elevation`	徽章的阴影
`Gradient gradient`	徽章内容的渐变色
`bool toAnimate`	徽章内容改变时是否显示动画效果
`BadgePosition position`	`BadgePosition.topStart()` 、 `BadgePosition.topEnd()` 、 `BadgePosition.bottomStart()` 、 `BadgePosition.bottomEnd()` 其中之一。有时候你想创建唯一的徽章位置或者手动创建一个新的。可使用 `BadgePosition.topEnd(top: -12, end: -20)` 或 `BadgePosition(start, top, end, bottom)` 来实现
`BadgeShape shape`	`BadgeShape.circle` 或 `BadgeShape.square` 。如果使用 `BadgeShape.square` ，可以用 `borderRadius` 来改变徽章的圆角半径
`BorderRadiusGeometry borderRadius`	徽章的圆角半径。仅在使用 `BadgeShape.square` 时有效
`EdgeInsetsGeometry padding`	徽章内容的内边距
`Duration animationDuration`	徽章内容改变时，动画的时长
`BadgeAnimationType animationType`	`BadgeAnimationType.slide` 、 `BadgeAnimationType.scale` 或 `BadgeAnimationType.fade` 其中之一
`bool showBadge`	动画隐藏或显示徽章的标志
`AlignmentGeometry alignment`	整个组件的对齐
`bool ignorePointer`	是否忽略光标选项，默认为忽略
`BorderSide borderSide`	为徽章添加一个边框

许可证

使用 Apache License 2.0 许可证 - 详细参考 LICENSE 。

[译]Flutter徽章组件badges

badges

安装

基本用法

动画

Chip

自定义用法

许可证