Flutter容器三角形设计

gopyfrb3  于 2023-05-01  发布在  Flutter
关注(0)|答案(1)|浏览(145)

我必须创建这个绿色容器。我怎么才能做到这一点?

我试过边界半径,但我不能。

fcipmucu

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.'),
          ),
        ),

输出为

相关问题