Flutter中如何实现两个Widget的BlendMode混合效果？

Flutter没有直接提供专门用于混合两个Widget的组件，但可以通过CustomPaint配合画布的图层操作来实现，这种方式尤其适合需要动画的场景，能精准控制两个元素重叠时的混合效果（比如你提到的BlendMode.xor）。

核心实现思路 #

利用CustomPainter在画布上绘制两个目标元素（形状、图片、文本都可以），通过canvas.saveLayer()创建离屏缓冲区绘制第二个元素，最后用canvas.restore(blendMode)将缓冲区内容与底层元素以指定混合模式合并。再结合动画控制器控制元素位置，实现重叠过程中的动态混合效果。

代码示例（气球与鸽子的XOR混合动画） #

import 'package:flutter/material.dart';

void main() => runApp(const BlendModeDemo());

class BlendModeDemo extends StatefulWidget {
  const BlendModeDemo({super.key});

  @override
  State<BlendModeDemo> createState() => _BlendModeDemoState();
}

class _BlendModeDemoState extends State<BlendModeDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _positionAnimation;

  @override
  void initState() {
    super.initState();
    // 创建动画控制器，3秒一个周期，来回重复
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);
    // 控制鸽子的水平移动范围
    _positionAnimation = Tween<double>(begin: 0, end: 200).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return CustomPaint(
                size: const Size(300, 300),
                painter: BlendModePainter(
                  offset: Offset(_positionAnimation.value, 0),
                  blendMode: BlendMode.xor,
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class BlendModePainter extends CustomPainter {
  final Offset offset;
  final BlendMode blendMode;

  BlendModePainter({required this.offset, required this.blendMode});

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制蓝色气球（底层元素）
    final balloonPaint = Paint()..color = Colors.blue;
    canvas.drawOval(
      Rect.fromCenter(center: size.center(Offset.zero), width: 100, height: 150),
      balloonPaint,
    );

    // 保存当前画布状态，创建离屏图层
    canvas.saveLayer(null, Paint());

    // 绘制棕色鸽子（上层元素，这里用矩形代替实际图片）
    // 实际项目中可以用ImageProvider加载图片，通过drawImage绘制
    final pigeonPaint = Paint()..color = Colors.brown;
    canvas.drawRect(
      Rect.fromLTWH(offset.dx, size.height / 2 - 50, 100, 100),
      pigeonPaint,
    );

    // 将离屏图层的内容与底层元素用指定BlendMode混合
    canvas.restore(blendMode);
  }

  @override
  bool shouldRepaint(covariant BlendModePainter oldDelegate) {
    // 位置或混合模式变化时重绘
    return oldDelegate.offset != offset || oldDelegate.blendMode != blendMode;
  }
}

扩展说明 #

• 如果要使用实际的Widget（比如文本、网络图片），可以用RepaintBoundary包裹目标Widget，通过toImage()方法将其转为Image对象，再在CustomPainter中调用canvas.drawImage()绘制。
• 静态混合场景也可以尝试Stack+ShaderMask的组合，但动画场景下CustomPaint的性能和可控性更优。
• 除了xor，你可以替换为任意BlendMode枚举值（如multiply、screen等），实现不同的混合效果。

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