Flutter CustomPainter如何绘制半透明区域？

你当前代码里canvas.saveLayer(null, holePainter)用了带BlendMode.dstOut的Paint作为图层初始画笔，这会导致后续绘制的背景色被错误混合，显示成灰色。针对「半透明背景+局部更低透明度的高亮孔洞」需求，提供两种可行实现方案：

方式一：修复saveLayer的正确用法 #

调整saveLayer的参数，避免初始混合模式干扰背景绘制，仅在绘制孔洞时使用混合模式：

class Highlighter extends CustomPainter {
  ValueListenable<double> valueListenable;
  Color backgroundColor;

  Highlighter({required this.valueListenable, this.backgroundColor = Colors.amber}) : super(repaint: valueListenable);

  @override
  void paint(Canvas canvas, Size size) {
    // 从监听变量获取孔洞透明度，实现淡入淡出
    final holeOpacity = valueListenable.value;
    // 全屏背景：透明度0.8的琥珀色
    final bgColor = backgroundColor.withOpacity(0.8);
    // 孔洞画笔：用dstOut混合模式，通过alpha控制孔洞与背景的透明度差
    final holePaint = Paint()
      ..color = Colors.black.withOpacity(0.8 - holeOpacity)
      ..blendMode = BlendMode.dstOut;

    // 保存图层时使用默认Paint，避免初始混合干扰
    canvas.saveLayer(null, Paint());
    
    // 1. 绘制全屏半透明背景
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint()..color = bgColor);
    
    // 2. 绘制高亮孔洞：通过dstOut减去区域透明度
    canvas.drawRect(const Rect.fromLTWH(100, 100, 100, 100), holePaint);
    
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

核心说明 #

• saveLayer不传入带混合模式的画笔，保证背景色正常绘制
• BlendMode.dstOut会减少对应区域的颜色透明度，实现「比背景更淡的孔洞」效果
• 通过valueListenable.value控制孔洞透明度，比如值从0到0.4变化时，孔洞透明度从0.8（与背景一致）降到0.4（高亮状态）

方式二：无需saveLayer的高效实现（推荐） #

直接通过叠加同色系低透明度颜色实现效果，无需图层保存，性能更优：

class Highlighter extends CustomPainter {
  ValueListenable<double> valueListenable;
  Color backgroundColor;

  Highlighter({required this.valueListenable, this.backgroundColor = Colors.amber}) : super(repaint: valueListenable);

  @override
  void paint(Canvas canvas, Size size) {
    final holeOpacity = valueListenable.value;
    // 全屏背景色
    final bgColor = backgroundColor.withOpacity(0.8);
    // 孔洞区域颜色：比背景淡的同色系颜色
    final holeColor = backgroundColor.withOpacity(0.8 - holeOpacity);

    // 1. 绘制全屏半透明背景
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint()..color = bgColor);

    // 2. 直接在目标区域绘制低透明度颜色，形成高亮孔洞
    canvas.drawRect(const Rect.fromLTWH(100, 100, 100, 100), Paint()..color = holeColor);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

核心说明 #

• 不需要混合模式和图层操作，直接通过颜色叠加实现视觉效果，性能损耗更低
• 淡入淡出逻辑通过valueListenable.value控制孔洞颜色的透明度，完全匹配需求中的背景与孔洞透明度差值

如果你的需求是「孔洞区域完全显示底层内容，周围半透明遮罩」，可以用以下优化版混合模式实现：

class Highlighter extends CustomPainter {
  ValueListenable<double> valueListenable;
  Color backgroundColor;

  Highlighter({required this.valueListenable, this.backgroundColor = Colors.amber}) : super(repaint: valueListenable);

  @override
  void paint(Canvas canvas, Size size) {
    final maskOpacity = valueListenable.value;
    // 遮罩透明度随监听变量变化，实现淡入淡出
    final maskColor = backgroundColor.withOpacity(0.8 * maskOpacity);
    final holePaint = Paint()..blendMode = BlendMode.clear;

    canvas.saveLayer(null, Paint());
    
    // 绘制半透明遮罩
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint()..color = maskColor);
    // 清除孔洞区域，显示底层内容
    canvas.drawRect(const Rect.fromLTWH(100, 100, 100, 100), holePaint);
    
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

内容的提问来源于stack exchange，提问作者SePröbläm