Flutter绘制重叠圆形：如何为交集区域设置不同颜色？

可以通过Flutter的Path.combine()方法结合路径运算，分别绘制两个圆的非重叠区域和交集区域，实现不同颜色的效果，具体实现代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            size: const Size(300, 200),
            painter: OverlappingCirclesPainter(),
          ),
        ),
      ),
    );
  }
}

class OverlappingCirclesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 创建第一个圆形路径
    final circle1 = Path()
      ..addOval(Rect.fromCircle(
        center: Offset(size.width * 0.35, size.height / 2),
        radius: 80,
      ));

    // 创建第二个圆形路径
    final circle2 = Path()
      ..addOval(Rect.fromCircle(
        center: Offset(size.width * 0.65, size.height / 2),
        radius: 80,
      ));

    // 计算两个圆的交集路径
    final intersectionPath = Path.combine(
      PathOperation.intersect,
      circle1,
      circle2,
    );

    // 计算第一个圆的非重叠区域（圆1减去交集部分）
    final circle1NonOverlap = Path.combine(
      PathOperation.difference,
      circle1,
      circle2,
    );

    // 计算第二个圆的非重叠区域（圆2减去交集部分）
    final circle2NonOverlap = Path.combine(
      PathOperation.difference,
      circle2,
      circle1,
    );

    // 绘制第一个圆的非重叠区域
    final paint1 = Paint()..color = Colors.blue;
    canvas.drawPath(circle1NonOverlap, paint1);

    // 绘制第二个圆的非重叠区域
    final paint2 = Paint()..color = Colors.orange;
    canvas.drawPath(circle2NonOverlap, paint2);

    // 绘制交集区域
    final intersectionPaint = Paint()..color = Colors.green;
    canvas.drawPath(intersectionPath, intersectionPaint);
  }

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

关键逻辑说明 #

• Path.combine()是实现效果的核心方法，通过PathOperation枚举指定路径运算类型：
  • PathOperation.intersect：提取两个路径的交集部分
  • PathOperation.difference：提取第一个路径减去第二个路径的剩余部分
• 依次绘制三个独立区域，即可得到两个圆主体颜色不同、交集区域异色的效果。

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