flutter - 如何使定制的油漆像被吃掉的部分一样扑腾？

Question

我想和自定义画家一起做这样的事情。我怎么能画出来？对我来说不是问题边界，渐变。我无法绘制资产卡的左侧部分。请帮忙！

Answer 1

您可以使用shaderonPaint来产生渐变效果。

Paint paint = Paint()
  ..shader = const LinearGradient(
    colors: [
      Color.fromARGB(255, 141, 23, 15),
      Colors.red,
    ],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ).createShader(
    Rect.fromLTRB(0, 0, size.width, size.height),
  )

在dartPad上运行

形状类

class EatenShape extends CustomPainter {
  final double gap = 4.0;

  final double radius;

  final Radius _border;

  final Color canvasColor;

  EatenShape({
    this.radius = 40,
    required this.canvasColor,
  }) : _border = Radius.circular(radius);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..shader = const LinearGradient(
        colors: [
          Color.fromARGB(255, 141, 23, 15),
          Colors.red,
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ).createShader(
        Rect.fromLTRB(0, 0, size.width, size.height),
      )
      ..style = PaintingStyle.fill;

    final _rect = Rect.fromLTRB(
      0,
      gap,
      size.height - gap * 2,
      size.height - gap,
    );

    ///left Circle
    Path fullPath = Path()
      ..addOval(_rect)

      ///eaten shape
      ..addRRect(
        RRect.fromLTRBAndCorners(
          size.height * .5,
          0,
          size.width,
          size.height,
          bottomLeft: _border,
          topLeft: _border,
          bottomRight: _border,
          topRight: _border,
        ),
      );

    Path drawPath = Path()..addPath(fullPath, Offset.zero);

    canvas.drawPath(drawPath, paint);

    Paint holoPaint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = gap
      ..color = canvasColor;
    canvas.drawOval(_rect, holoPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

我试过Path's fillType，不确定我在那里遇到的问题。另一件事可以只使用带有装饰的 Container 而不使用CustomPaint.

你可以使用这种油漆作为

SizedBox(
  width: 300,
  height: 70,
  child: Stack(
    children: [
      Positioned.fill(
        child: CustomPaint(
          painter: EatenShape(
            canvasColor: Theme.of(context).scaffoldBackgroundColor,
          ),
        ),
      ),
    ],
  ),
),