Flutter中如何让CustomPaint绘制的自定义形状仅自身可响应点击

核心问题本质 #

默认的手势识别逻辑仅根据组件的外接矩形边界判定命中范围，不会感知CustomPaint的实际绘制内容。要实现仅自定义形状可响应点击，需要绕过默认的矩形判定规则，通过路径类提供的点位检测能力，仅当点击位置落在绘制形状内部时，才将组件加入手势事件传递链。

实现步骤 #

• 暴露绘制路径：将CustomPainter中临时创建的形状路径提取为可访问的成员变量，供命中测试逻辑调用
• 自定义命中判定规则：重写组件的命中测试方法，替换默认的外接矩形判定逻辑
• 关联手势识别：将手势组件绑定到经过自定义命中测试的渲染树上

完整可运行代码 #

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Shapes',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Custom Shapes App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化painter实例，复用路径对象
  final RPSCustomPainter _painter = RPSCustomPainter();
  final Size _buttonSize = Size(300, 300);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.white24,
      body: Center(
        // 用自定义命中测试组件包裹原有手势和绘制逻辑
        child: CustomShapeHitTest(
          hitPath: _painter.shapePath,
          size: _buttonSize,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: (){
              print("仅点击星形内部可触发回调");
            },
            child: CustomPaint(
              size: _buttonSize,
              painter: _painter,
            ),
          ),
        ),
      ),
    );
  }
}

// 自定义形状命中测试Widget
class CustomShapeHitTest extends SingleChildRenderObjectWidget {
  // 待检测的形状路径
  final Path hitPath;
  // 组件整体尺寸
  final Size size;

  const CustomShapeHitTest({
    Key? key,
    required this.hitPath,
    required this.size,
    required Widget child,
  }) : super(key: key, child: child);

  @override
  RenderCustomShapeHitTest createRenderObject(BuildContext context) {
    return RenderCustomShapeHitTest(
      hitPath: hitPath,
      size: size,
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderCustomShapeHitTest renderObject) {
    renderObject.hitPath = hitPath;
    renderObject.size = size;
  }
}

// 核心渲染逻辑，实现自定义命中判定
class RenderCustomShapeHitTest extends RenderProxyBox {
  Path _hitPath;
  Size _size;

  RenderCustomShapeHitTest({
    required Path hitPath,
    required Size size,
  }) : _hitPath = hitPath, _size = size;

  Path get hitPath => _hitPath;
  set hitPath(Path value) {
    if (_hitPath != value) {
      _hitPath = value;
      markNeedsPaint();
    }
  }

  Size get size => _size;
  set size(Size value) {
    if (_size != value) {
      _size = value;
      markNeedsLayout();
    }
  }

  @override
  void performLayout() {
    // 约束子组件匹配指定尺寸
    child?.layout(BoxConstraints.tight(_size));
    super.size = _size;
  }

  @override
  bool hitTestSelf(Offset position) {
    // 核心判定逻辑：仅当点击位置在形状路径内部，才响应命中
    return _hitPath.contains(position);
  }
}

// 原有的自定义绘制器
class RPSCustomPainter extends CustomPainter{
  // 暴露形状路径供命中测试使用
  final Path shapePath = Path();

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;
    paint_0.shader = ui.Gradient.linear(
      Offset(0, size.height*0.5),
      Offset(size.width, size.height*0.5),
      [Color(0xffffed08), Color(0xffffd800), Color(0xffff0000)],
      [0.00, 0.34, 1.00]
    );

    // 重置路径避免重复绘制残留
    shapePath.reset();
    shapePath.moveTo(0, size.height*0.50);
    shapePath.lineTo(size.width*0.33, size.height*0.33);
    shapePath.lineTo(size.width*0.50, 0);
    shapePath.lineTo(size.width*0.67, size.height*0.33);
    shapePath.lineTo(size.width, size.height*0.50);
    shapePath.lineTo(size.width*0.67, size.height*0.67);
    shapePath.lineTo(size.width*0.50, size.height);
    shapePath.lineTo(size.width*0.33, size.height*0.67);
    shapePath.lineTo(0, size.height*0.50);
    shapePath.close();

    canvas.drawPath(shapePath, paint_0);
  }

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

扩展说明 #

• 该方案支持任意自定义形状，不管是多边形、贝塞尔曲线、带镂空的复杂形状，都可以通过Path对象的contains()方法准确判定命中范围
• 如果形状带有描边，可通过Path.extendWithStroke()方法扩展路径范围，保证描边区域也能正常响应点击
• 对超复杂的路径，可提前缓存命中判定网格，降低每次点击的计算开销

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