Flutter 自定义叠加层

Question

我正在开发一个需要基于点击坐标定位的自定义叠加层的应用。然后覆盖应该填充该位置的其余空间。填充空间方向基于从点击点到顶部或底部的距离，使用距离较大的方向，并且应在点击其表面外时关闭。

我查看了Overlay Widget，但我似乎不明白如何使用它来实现所描述的属性。

到目前为止，我已经创建了一个包含 Overlay 描述的 StatefulWidget。

   class ScriptureDisplay extends StatefulWidget {
  @override
  _ScriptureDisplayState createState() => _ScriptureDisplayState();
}

class _ScriptureDisplayState extends State<ScriptureDisplay> {

  OverlayEntry _overlayEntry;


  OverlayEntry _createOverlayEntry() {
    RenderBox renderBox = context.findRenderObject();
    var size = renderBox.size;
    var offset = renderBox.localToGlobal(Offset.zero);

    return OverlayEntry(
        builder: (context) => Positioned(
              left: offset.dx,
              top: offset.dy + size.height + 5.0,
              width: size.width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  nip(),
                  body(context, offset.dy),
                ],
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {

  return RaisedButton(
    child: Text("Click Me"),
    onPressed: (){
      this._overlayEntry = this._createOverlayEntry();
      Overlay.of(context).insert(this._overlayEntry);
    },
  );
  }

  Widget body(BuildContext context, double offset) {
    return Material(
      borderRadius: BorderRadius.all(
        Radius.circular(8.0),
      ),
//      color: this.color,
      elevation: 4.0,
      child: Container(
        width: MediaQuery.of(context).size.width,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: ListView(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          children: ["First", "Second", "Third"]
              .map((String s) => ListTile(
                    subtitle: Text(s),
                  ))
              .toList(growable: false),
        ),
      ),
    );
  }

  Widget nip() {
    return FittedBox(
      child: Container(
        height: 20.0,
        width: 20.0,
        margin: EdgeInsets.only(left:10),
        child: CustomPaint(
          painter: OpenPainter(),
        ),
      ),
    );
  }
}

那么我如何拾取和计算相对于整个屏幕的当前点击点，以便我可以决定覆盖方向。

Answer 1

OverlayEntry 确实是实现您所说的一个不错的选择。您可以使用GestureRecognizer 包装您的小部件，它应该在例如长按上创建此覆盖。这个小部件可以使用很多回调，其中还包含像LongPressStartDetails 这样的位置。在那里您可以根据globalPosition 和设备大小（MediaQuery.of(context).size）计算OverlayEntry 的位置和大小。

提示：要删除OverlayEntry，您必须在OverlayEntry 小部件本身上调用remove()！所以请保留对它的引用。

详细解答

在对来自 cmets 的响应进行一些修补后，我想出了以下解决方案。

我使用了一个 Stack Widget，其初始容器的最大宽度和高度被包裹在 GestureDetector 中，以检测实际小部件之外的任何点击。点击这个Container会调用_overlayEntry.remove();来关闭Overlay。

然后，我比较了 Tap Widget 与屏幕中心的距离，以确定 Overlay 应该在它之上还是之下。

我终于使用了一个 Positioned Widget，其中 top 被计算为适合所选的叠加位置。最后，我计算了 Overlay body height 为从点击到屏幕末端的距离。

enum OVERLAY_POSITION { TOP, BOTTOM }

class ScriptureDisplay extends StatefulWidget {
  @override
  _ScriptureDisplayState createState() => _ScriptureDisplayState();
}

class _ScriptureDisplayState extends State<ScriptureDisplay> {
  TapDownDetails _tapDownDetails;
  OverlayEntry _overlayEntry;
  OVERLAY_POSITION _overlayPosition;

  double _statusBarHeight;
  double _toolBarHeight;

  OverlayEntry _createOverlayEntry() {
    RenderBox renderBox = context.findRenderObject();

    var size = renderBox.size;

    var offset = renderBox.localToGlobal(Offset.zero);
    var globalOffset = renderBox.localToGlobal(_tapDownDetails.globalPosition);

    _statusBarHeight = MediaQuery.of(context).padding.top;

    // TODO: Calculate ToolBar Height Using MediaQuery
    _toolBarHeight = 50;
    var screenHeight = MediaQuery.of(context).size.height;

    var remainingScreenHeight = screenHeight - _statusBarHeight - _toolBarHeight;

    if (globalOffset.dy > remainingScreenHeight / 2) {
      _overlayPosition = OVERLAY_POSITION.TOP;
    } else {
      _overlayPosition = OVERLAY_POSITION.BOTTOM;
    }
    return OverlayEntry(builder: (context) {
      return Stack(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              _overlayEntry.remove();
            },
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.blueGrey.withOpacity(0.1),
            ),
          ),
          Positioned(
            left: 10,
            top: _overlayPosition == OVERLAY_POSITION.TOP
                ? _statusBarHeight + _toolBarHeight
                : offset.dy + size.height - 5.0,
            width: MediaQuery.of(context).size.width - 20,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // ignore: sdk_version_ui_as_code
                if (_overlayPosition == OVERLAY_POSITION.BOTTOM)
                  nip(),
                body(context, offset.dy),
                // ignore: sdk_version_ui_as_code
                if (_overlayPosition == OVERLAY_POSITION.TOP)
                  nip(),
              ],
            ),
          )
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 400, left: 10, right: 100),
      child: GestureDetector(
        child: Text("C"),
        onTapDown: (TapDownDetails tapDown) {
          setState(() {
            _tapDownDetails = tapDown;
          });
          this._overlayEntry = this._createOverlayEntry();
          Overlay.of(context).insert(this._overlayEntry);
        },
      ),
    );
  }

  Widget body(BuildContext context, double offset) {
    return Material(
      borderRadius: BorderRadius.all(
        Radius.circular(8.0),
      ),
      elevation: 4.0,
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: _overlayPosition == OVERLAY_POSITION.BOTTOM
            ? MediaQuery.of(context).size.height -
                _tapDownDetails.globalPosition.dy -
                20
            : _tapDownDetails.globalPosition.dy -
                _toolBarHeight -
                _statusBarHeight -
                15,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: ListView(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          children: [
            "First",
            "Second",
            "Third",
            "First",
            "Second",
            "Third",
            "First",
            "Second",
            "Third"
          ]
              .map((String s) => ListTile(
                    subtitle: Text(s),
                  ))
              .toList(growable: false),
        ),
      ),
    );
  }

  Widget nip() {
    return Container(
      height: 10.0,
      width: 10.0,
      margin: EdgeInsets.only(left: _tapDownDetails.globalPosition.dx),
      child: CustomPaint(
        painter: OpenPainter(_overlayPosition),
      ),
    );
  }
}

class OpenPainter extends CustomPainter {
  final OVERLAY_POSITION overlayPosition;

  OpenPainter(this.overlayPosition);

  @override
  void paint(Canvas canvas, Size size) {
    switch (overlayPosition) {
      case OVERLAY_POSITION.TOP:
        var paint = Paint()
          ..style = PaintingStyle.fill
          ..color = Colors.white
          ..isAntiAlias = true;

        _drawThreeShape(canvas,
            first: Offset(0, 0),
            second: Offset(20, 0),
            third: Offset(10, 15),
            size: size,
            paint: paint);

        break;
      case OVERLAY_POSITION.BOTTOM:
        var paint = Paint()
          ..style = PaintingStyle.fill
          ..color = Colors.white
          ..isAntiAlias = true;

        _drawThreeShape(canvas,
            first: Offset(15, 0),
            second: Offset(0, 20),
            third: Offset(30, 20),
            size: size,
            paint: paint);

        break;
    }

    canvas.save();
    canvas.restore();
  }

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

  void _drawThreeShape(Canvas canvas,
      {Offset first, Offset second, Offset third, Size size, paint}) {
    var path1 = Path()
      ..moveTo(first.dx, first.dy)
      ..lineTo(second.dx, second.dy)
      ..lineTo(third.dx, third.dy);
    canvas.drawPath(path1, paint);
  }

  void _drawTwoShape(Canvas canvas,
      {Offset first, Offset second, Size size, paint}) {
    var path1 = Path()
      ..moveTo(first.dx, first.dy)
      ..lineTo(second.dx, second.dy);
    canvas.drawPath(path1, paint);
  }
}

结果