Как включить взаимодействие с видимыми компонентами за холстом?

Question

Я пишу приложение-флаттер и пытаюсь создать оверлей учебника, который будет полностью отображать только те компоненты, с которыми я хочу, чтобы пользователь мог взаимодействовать.

поэтому я расширил класс 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.

, в моем случае я хотел определить, когда пользователь нажимает на переполнение, но такжеразрешить ему взаимодействовать с видимыми виджетами за ним.

, поэтому я создал класс InvertedClipper, который расширяет CustomClipper:

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),
  ...