dart - 如何启用与 Canvas 后面的可见组件的 ui 交互？

Question

我正在编写一个 flutter 应用程序，我正在尝试创建一个教程叠加层，它将完全仅显示我希望用户能够与之交互的组件。

所以我扩展了 CustomPainter 类，同时获取页面的上下文(以获取他的尺寸)和 GlobalKeys 列表(用于我想要显示并与之交互的元素)

Color colorBlack = Colors.black.withOpacity(0.4);

class CurvePainter extends CustomPainter{

  BuildContext context;
  List<GlobalKey> globalKeys;
  double padding;

  @override
  void paint(Canvas canvas, Size size) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final double screenHeight = MediaQuery.of(context).size.height;
    Path path = Path()..addRect(Rect.fromLTWH(0, 0, screenWidth, screenHeight));

    Set<GlobalKey> keysSet = Set.from(globalKeys);
    keysSet.forEach((element){
      final List<double> vals = global_key_util.getArea(element);
      path = Path.combine(PathOperation.difference,
          path,
          Path()
            ..addOval(Rect.fromLTWH(vals[0]-(padding/2),vals[1]-padding/2,vals[2]+padding,vals[3]+padding)));
    });

    canvas.drawPath(path,
        Paint()..color = colorBlack);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }

  CurvePainter({this.context,this.globalKeys,this.padding=4});

}

到目前为止一切顺利...我希望用户与之交互的按钮完全可见，在我页面的 initState() 中我创建了叠加层并显示了它。

问题是我无法与那个按钮互动!我该如何解决这个问题？

谢谢

Answer 1

所以..答案就是不使用 CustomPainter，而是将 ClipPath 与 CustomClipper 一起使用。

在我的例子中，我想检测用户何时点击溢出，但也允许他与其背后的可见小部件进行交互。

所以我创建了一个扩展 CustomClipper 的 InvertedClipper 类:

import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
import 'HoleArea.dart';
import 'WidgetData.dart';

class InvertedClipper extends CustomClipper<Path> {

  final Animation<double> animation;
  final List<WidgetData> widgetsData;
  double padding;
  Function deepEq = const DeepCollectionEquality().equals;
  List<HoleArea> areas = [];

  InvertedClipper({@required this.padding, this.animation, Listenable reclip,
      this.widgetsData}) : super(reclip: reclip) {
    if (widgetsData.isNotEmpty) {
      widgetsData.forEach((WidgetData widgetData) {
        if (widgetData.isEnabled) {
          final GlobalKey key = widgetData.key;
          if (key == null) {
        //    throw new Exception("GlobalKey is null!");
          } else if (key.currentWidget == null) {
//            throw new Exception("GlobalKey is not assigned to a Widget!");
          } else {
            areas.add(getHoleArea(key: key,shape: widgetData.shape,padding: widgetData.padding));
          }
        }
      });
    }
  }

  @override
  Path getClip(Size size) {
    Path path = Path();
    double animationValue = animation != null ? animation.value : 0;
    areas.forEach((HoleArea area) {
      switch (area.shape) {
        case WidgetShape.Oval: {
          path.addOval(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
              area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)));
        }
        break;
        case WidgetShape.Rect: {
          path.addRect(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
              area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)));
        }
        break;
        case WidgetShape.RRect: {
          path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
              area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)),
              topLeft: Radius.circular(5.0),
              topRight: Radius.circular(5.0),
              bottomLeft: Radius.circular(5.0),
              bottomRight: Radius.circular(5.0)));
        }
        break;
      }
    });
    return path
      ..addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
      ..fillType = PathFillType.evenOdd;
  }

  @override
  bool shouldReclip(InvertedClipper oldClipper) {
    return !deepEq(oldClipper.areas, areas);
  }
}

并且我在此之前配置了一个 GestureDetector 来检测用户何时点击覆盖:

return GestureDetector(
                onTap: onTap,
                child: ClipPath(
                    clipper: InvertedClipper(
                      padding: defaultPadding,
                        animation: animation,
                        reclip: animationController,
                        widgetsData: widgetsData),
  ...