Flutter中如何将图片透明区域的点击事件透传至下层？

问题分析 #

你的需求是上层图片的非透明区域响应自身点击，透明区域让下层组件接收点击。当前代码的问题在于上层InkButton会拦截整个区域的点击事件，不管图片是否透明，导致下层组件永远无法触发点击。

解决方案：自定义支持透明检测的图片组件 #

核心思路是通过重写RenderBox的hitTestSelf方法，判断点击位置的像素Alpha值：Alpha>0则响应点击，否则透传事件到下层。

1. 自定义RenderBox和Widget #

import 'dart:typed_data';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

// 自定义RenderBox，负责图片绘制和点击检测
class TransparentImageRenderBox extends RenderBox {
  ImageProvider _imageProvider;
  ImageStream? _imageStream;
  ImageInfo? _imageInfo;
  late Size _imageSize;

  TransparentImageRenderBox({required ImageProvider imageProvider}) : _imageProvider = imageProvider;

  set imageProvider(ImageProvider value) {
    if (_imageProvider != value) {
      _imageProvider = value;
      _imageStream?.removeListener(_imageListener);
      _imageStream = _imageProvider.resolve(createLocalImageConfiguration(this));
      _imageStream!.addListener(_imageListener);
    }
  }

  @override
  void attach(PipelineOwner owner) {
    super.attach(owner);
    _imageStream = _imageProvider.resolve(createLocalImageConfiguration(this));
    _imageStream!.addListener(_imageListener);
  }

  @override
  void detach() {
    _imageStream?.removeListener(_imageListener);
    super.detach();
  }

  void _imageListener(ImageInfo info, bool synchronousCall) {
    _imageInfo = info;
    _imageSize = Size(info.image.width.toDouble(), info.image.height.toDouble());
    markNeedsLayout();
    markNeedsPaint();
  }

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (_imageInfo != null) {
      // 绘制图片，适配BoxFit.fill
      context.canvas.drawImageRect(
        _imageInfo!.image,
        Rect.fromLTWH(0, 0, _imageSize.width, _imageSize.height),
        Rect.fromLTWH(offset.dx, offset.dy, size.width, size.height),
        Paint(),
      );
    }
  }

  @override
  bool hitTestSelf(Offset position) {
    if (_imageInfo == null) return false;

    // 将点击位置转换为图片内部坐标（适配缩放）
    final scaleX = _imageSize.width / size.width;
    final scaleY = _imageSize.height / size.height;
    final x = (position.dx * scaleX).clamp(0, _imageSize.width - 1).toInt();
    final y = (position.dy * scaleY).clamp(0, _imageSize.height - 1).toInt();

    // 获取点击位置的像素Alpha值
    final pixelData = _imageInfo!.image.toByteData();
    if (pixelData == null) return false;
    final pixels = pixelData.buffer.asUint32List();
    final pixel = pixels[y * _imageInfo!.image.width + x];
    final alpha = (pixel >> 24) & 0xff;

    // Alpha>0则响应点击，否则透传
    return alpha > 0;
  }
}

// 对外暴露的Widget
class TransparentImage extends SingleChildRenderObjectWidget {
  final ImageProvider imageProvider;

  const TransparentImage({super.key, required this.imageProvider});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return TransparentImageRenderBox(imageProvider: imageProvider);
  }

  @override
  void updateRenderObject(BuildContext context, covariant TransparentImageRenderBox renderObject) {
    renderObject.imageProvider = imageProvider;
  }
}

2. 在Stack中使用 #

替换你原来的上层InkButton，用GestureDetector包裹自定义的TransparentImage：

Stack(
  children: [
    Positioned.fill(
      child: InkWell(
        onTap: () {
          print('下层组件被点击');
        },
        child: Image.asset(
          'lib/bg_bottom.png',
          fit: BoxFit.fill,
        ),
      ),
    ),
    Positioned(
      top: 20,
      left: 20,
      right: 20,
      bottom: 20,
      child: GestureDetector(
        onTap: () {
          print('上层图片非透明区域被点击');
        },
        child: TransparentImage(
          imageProvider: AssetImage('lib/bg_top.png'),
        ),
      ),
    ),
  ],
)

关键细节说明 #

• 图片加载异步处理：图片未加载完成时，点击会直接透传至下层。
• 适配缩放：代码中处理了BoxFit.fill的缩放逻辑，确保点击位置与图片像素正确映射。
• 性能优化：如果是超大图片，toByteData()可能会有性能开销，可以考虑缓存像素数据，或者仅在点击时获取对应位置的像素（而非整个图片）。
• 兼容多种图片类型：支持本地图片（AssetImage）、网络图片（NetworkImage）等所有ImageProvider子类。

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