我必须创建这个绿色容器。我怎么才能做到这一点?
我试过边界半径,但我不能。
fcipmucu1#
使用如下首先创建装饰类
class BadgeDecoration extends Decoration { final Color? badgeColor; final double? badgeSize; final TextSpan? textSpan; const BadgeDecoration( {@required this.badgeColor = Colors.black, @required this.badgeSize, @required this.textSpan}); @override BoxPainter createBoxPainter([VoidCallback? onChanged]) => _BadgePainter(badgeColor!, badgeSize!, textSpan!); } class _BadgePainter extends BoxPainter { static const double BASELINE_SHIFT = 1; static const double CORNER_RADIUS = 15; final Color badgeColor; final double badgeSize; final TextSpan textSpan; _BadgePainter(this.badgeColor, this.badgeSize, this.textSpan); @override void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { canvas.save(); canvas.translate( offset.dx + configuration.size!.width - badgeSize, offset.dy); canvas.drawPath(buildBadgePath(), getBadgePaint()); // draw text final hyp = math.sqrt(badgeSize * badgeSize + badgeSize * badgeSize); final textPainter = TextPainter( text: textSpan, textDirection: TextDirection.ltr, textAlign: TextAlign.center); textPainter.layout(minWidth: hyp, maxWidth: hyp); final halfHeight = textPainter.size.height / 2; final v = math.sqrt(halfHeight * halfHeight + halfHeight * halfHeight) + BASELINE_SHIFT; canvas.translate(v, -v); canvas.rotate(0.785398); // 45 degrees textPainter.paint(canvas, Offset.zero); canvas.restore(); } Paint getBadgePaint() => Paint() ..isAntiAlias = true ..color = badgeColor; Path buildBadgePath() => Path.combine( PathOperation.difference, Path() ..addRRect(RRect.fromLTRBAndCorners(0, 0, badgeSize, badgeSize, topRight: const Radius.circular(CORNER_RADIUS))), Path() ..lineTo(0, badgeSize) ..lineTo(badgeSize, badgeSize) ..close()); }
然后在Ui中使用它,如下所示
Card( child: Container( width: 300, height: 200, padding: const EdgeInsets.all(16), foregroundDecoration: const BadgeDecoration( badgeColor: Colors.green, badgeSize: 70, textSpan: TextSpan( text: 'AWESOME', style: TextStyle(color: Colors.white, fontSize: 12), ), ), child: const Text( 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'), ), ),
输出为
1条答案
按热度按时间fcipmucu1#
使用如下
首先创建装饰类
然后在Ui中使用它,如下所示
输出为