Flutter ShaderMask使用TileMode.repeated时1px间隙问题求助

我在使用ShaderMask给多个Widget添加重复瓦片背景时，发现瓦片之间出现了1px的间隙，当前使用的代码如下：

ShaderMask(
    blendMode: BlendMode.srcIn,
    shaderCallback: (bounds) => ImageShader(
        snapshot.data!,
        TileMode.repeated,
        TileMode.repeated,
        Matrix4.identity().storage,
    ),
)                  

问题效果截图：

实用解决方法： #

• 微调矩阵缩放抵消精度误差：给ImageShader的变换矩阵添加极小的缩放比例，让瓦片边缘轻微重叠，覆盖间隙：

  ShaderMask(
      blendMode: BlendMode.srcIn,
      shaderCallback: (bounds) => ImageShader(
          snapshot.data!,
          TileMode.repeated,
          TileMode.repeated,
          // 缩放1.001倍，抵消渲染精度导致的间隙
          Matrix4.scale(1.001, 1.001).storage,
      ),
  )
  

• 预处理瓦片图片：如果图片边缘存在透明或裁切误差，用图像工具把瓦片的左右、上下边缘像素做融合处理，或者将图片尺寸放大1px，避免渲染时的边缘空隙。
• 自定义Painter绘制背景：绕开ShaderMask的精度限制，自定义Painter直接绘制重复背景，主动扩大绘制范围覆盖间隙：

  class RepeatBackgroundPainter extends CustomPainter {
    final Image image;
  
    RepeatBackgroundPainter(this.image);
  
    @override
    void paint(Canvas canvas, Size size) {
      final paint = Paint()
        ..shader = ImageShader(
          image,
          TileMode.repeated,
          TileMode.repeated,
          Matrix4.identity().storage,
        );
      // 绘制范围超出Widget边界1px，避免边缘间隙
      canvas.drawRect(Rect.fromLTWH(-1, -1, size.width + 2, size.height + 2), paint);
    }
  
    @override
    bool shouldRepaint(covariant RepeatBackgroundPainter oldDelegate) =>
        oldDelegate.image != image;
  }
  

  使用时用CustomPaint包裹目标Widget即可。

内容的提问来源于stack exchange，提问作者SotoArmando