为什么在使用 CustomPainter 时渐变会在整个屏幕上绘制？答案

【问题标题】：Why does gradient paint over the entire screen while using CustomPainter?为什么在使用 CustomPainter 时渐变会在整个屏幕上绘制？
【发布时间】：2021-01-16 18:21:22
【问题描述】：

最少的可重现代码：

class FooPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: MyPainter(),
        size: Size(100, 100),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final gradient = LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.orange,
        Colors.blue,
      ],
    );

    final rect = Rect.fromLTWH(0, 0, size.width, size.height); // Creating fixed Rect
    final shader = gradient.createShader(rect);
    final paint = Paint()
      ..color = Colors.indigo
      ..shader = shader;
    canvas.drawPaint(paint);
  }

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

我将100 x 100 的大小传递给我的自定义画家，但绘制的渐变占用了整个可用空间。

输出：

【问题讨论】：

因为你没有剪裁画布
@pskink 谢谢，它在剪裁后工作（使用ClipRRect，你有没有其他方法可以在paint 方法中剪裁它？）。但是，如果我只是使用canvas.drawRect 绘制Rect，那么它可以在没有剪辑的情况下工作。为什么会有这种行为？
因为drawRect 绘制了一个指定区域（顺便说一句，该区域可以扩展“正常”画布边界）
不是clipRRect，而是clipRect - 类似于：canvas.clipRect(Offset.zero & size)
当然，欢迎您

标签： flutter flutter-layout

【解决方案1】：

一如既往地感谢@pskink。绘画前需要剪裁。

canvas.clipRect(Offset.zero & size) 
canvas.drawPaint(paint);

【讨论】：