如何在颤动的按下/手指/鼠标/光标位置显示菜单

Question

我有这段从Style clipboard in flutter得到的代码

showMenu(
        context: context,
        // TODO: Position dynamically based on cursor or textfield
        position: RelativeRect.fromLTRB(0.0, 600.0, 300.0, 0.0),
        items: [
          PopupMenuItem(
            child: Row(
              children: <Widget>[
                // TODO: Dynamic items / handle click
                PopupMenuItem(
                  child: Text(
                    "Paste",
                    style: Theme.of(context)
                        .textTheme
                        .body2
                        .copyWith(color: Colors.red),
                  ),
                ),
                PopupMenuItem(
                  child: Text("Select All"),
                ),
              ],
            ),
          ),
        ],
      );

此代码效果很好，除了创建的弹出窗口位于固定位置之外，我将如何使其弹出在鼠标/按下/手指/光标位置或附近的某个位置，有点像当您想在手机上复制和粘贴。 （此对话框弹出不会用于复制和粘贴）

Answer 1

像这样使用手势检测器的 onTapDown

 GestureDetector(
        onTapDown: (TapDownDetails details) {
          showPopUpMenu(details.globalPosition);
        },

然后在这种方法中，我们使用点击详细信息来查找位置

Future<void> showPopUpMenu(Offset globalPosition) async {
double left = globalPosition.dx;
double top = globalPosition.dy;
await showMenu(
  color: Colors.white,
  //add your color
  context: context,
  position: RelativeRect.fromLTRB(left, top, 0, 0),
  items: [
    PopupMenuItem(
      value: 1,
      child: Padding(
        padding: const EdgeInsets.only(left: 0, right: 40),
        child: Row(
          children: [
            Icon(Icons.mail_outline),
            SizedBox(
              width: 10,
            ),
            Text(
              "Menu 1",
              style: TextStyle(color: Colors.black),
            ),
          ],
        ),
      ),
    ),
    PopupMenuItem(
      value: 2,
      child: Padding(
        padding: const EdgeInsets.only(left: 0, right: 40),
        child: Row(
          children: [
            Icon(Icons.vpn_key),
            SizedBox(
              width: 10,
            ),
            Text(
              "Menu 2",
              style: TextStyle(color: Colors.black),
            ),
          ],
        ),
      ),
    ),
    PopupMenuItem(
      value: 3,
      child: Row(
        children: [
          Icon(Icons.power_settings_new_sharp),
          SizedBox(
            width: 10,
          ),
          Text(
            "Menu 3",
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
    ),
  ],
  elevation: 8.0,
).then((value) {
  print(value);
  if (value == 1) {
    //do your task here for menu 1
  }
  if (value == 2) {
    //do your task here for menu 2
  }
  if (value == 3) {
    //do your task here for menu 3
  }
});

希望有效果

Answer 2

我可以通过使用这个答案来解决类似的问题： https://stackoverflow.com/a/54714628/559525

基本上，我在每个 ListTile 周围添加了一个 GestureDetector()，然后您使用 onTapDown 存储您的新闻位置并使用 onLongPress 调用您的 showMenu 函数。以下是我添加的关键函数：

  _showPopupMenu() async {
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();

    await showMenu(
      context: context,
      position: RelativeRect.fromRect(
          _tapPosition & Size(40, 40), // smaller rect, the touch area
          Offset.zero & overlay.size // Bigger rect, the entire screen
          ),
      items: [
        PopupMenuItem(
          child: Text("Show Usage"),
        ),
        PopupMenuItem(
          child: Text("Delete"),
        ),
      ],
      elevation: 8.0,
    );
  }

  void _storePosition(TapDownDetails details) {
    _tapPosition = details.globalPosition;
  }
}

然后这里是完整的代码（你必须调整一些东西，比如图像，并填写设备列表）：

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import 'dart:core';

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

  final String title;

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

class _RecentsPageState extends State<RecentsPage> {

  List<String> _recents;

  var _tapPosition;

  @override
  void initState() {
    super.initState();
    _tapPosition = Offset(0.0, 0.0);
    getRecents().then((value) {
      setState(() {
        _recents = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFFFFF),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(height: 25),
              Stack(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(left: 40),
                    child: Center(
                      child: AutoSizeText(
                        "Recents",
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 32),
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 30, top: 0),
                    child: GestureDetector(
                        onTap: () => Navigator.of(context).pop(),
                        child: Transform.scale(
                          scale: 2.0,
                          child: Icon(
                            Icons.chevron_left,
                          ),
                        )),
                  ),
                ],
              ),
              Container(
                height: 15,
              ),
              Container(
                height: 2,
                color: Colors.blue,
              ),
              Container(
                height: 10,
              ),
              Flexible(
                child: ListView(
                  padding: EdgeInsets.all(15.0),
                  children: ListTile.divideTiles(
                    context: context,
                    tiles: _getRecentTiles(),
                  ).toList(),
                ),
              ),
              Container(height: 15),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> _getRecentTiles() {
    List<Widget> devices = List<Widget>();
    String _dev;
    String _owner = "John Doe";

    if (_recents != null) {
      for (_dev in _recents.reversed) {
        if (_dev != null) {
          _dev = _dev.toUpperCase().trim();

            String serial = "12341234";

            devices.add(GestureDetector(
                onTapDown: _storePosition,
                onLongPress: () {
                  print("long press of $serial");
                  _showPopupMenu();
                },
                child: ListTile(
                  contentPadding: EdgeInsets.symmetric(vertical: 20),
                  leading: Transform.scale(
                      scale: 0.8,
                      child: Image(
                        image: _myImage,
                      )),
                  title: AutoSizeText(
                    "$_owner",
                    maxLines: 1,
                    style: TextStyle(fontSize: 22),
                  ),
                  subtitle: Text("Serial #: $serial"),
                  trailing: Icon(Icons.keyboard_arrow_right),
                )));
        }
      }
    } else {
      devices.add(ListTile(
        contentPadding: EdgeInsets.symmetric(vertical: 20),
        title: AutoSizeText(
          "No Recent Devices",
          maxLines: 1,
          style: TextStyle(fontSize: 20),
        ),
        subtitle:
            Text("Click the button to add a device"),
        onTap: () {
          print('add device');
        },
      ));
    }
    return devices;
  }

  _showPopupMenu() async {
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();

    await showMenu(
      context: context,
      position: RelativeRect.fromRect(
          _tapPosition & Size(40, 40), // smaller rect, the touch area
          Offset.zero & overlay.size // Bigger rect, the entire screen
          ),
      items: [
        PopupMenuItem(
          child: Text("Show Usage"),
        ),
        PopupMenuItem(
          child: Text("Delete"),
        ),
      ],
      elevation: 8.0,
    );
  }

  void _storePosition(TapDownDetails details) {
    _tapPosition = details.globalPosition;
  }
}

Answer 3

这是一个可重复使用的小部件，可以满足您的需要。只需用这个CopyableWidget 包裹你的Text 或其他Widget 并传入onGetCopyTextRequested。长按小部件时将显示复制菜单，将返回的文本内容复制到剪贴板，并在完成时显示Snackbar。

/// The text to copy to the clipboard should be returned or null if nothing can be copied
typedef GetCopyTextCallback = String Function();

class CopyableWidget extends StatefulWidget {

    final Widget child;
    final GetCopyTextCallback onGetCopyTextRequested;

    const CopyableWidget({
        Key key,
        @required this.child,
        @required this.onGetCopyTextRequested,
    }) : super(key: key);

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

class _CopyableWidgetState extends State<CopyableWidget> {

    Offset _longPressStartPos;

    @override
    Widget build(BuildContext context) {
        return InkWell(
            highlightColor: Colors.transparent,
            onTapDown: _onTapDown,
            onLongPress: () => _onLongPress(context),
            child: widget.child
        );
    }

    void _onTapDown(TapDownDetails details) {
        setState(() {
            _longPressStartPos = details?.globalPosition;
        });
    }

    void _onLongPress(BuildContext context) async {
        if (_longPressStartPos == null)
            return;

        var isCopyPressed = await showCopyMenu(
            context: context,
            pressedPosition: _longPressStartPos
        );
        if (isCopyPressed == true && widget.onGetCopyTextRequested != null) {
            var copyText = widget.onGetCopyTextRequested();
            if (copyText != null) {
                await Clipboard.setData(ClipboardData(text: copyText));

                _showSuccessSnackbar(
                    context: context,
                    text: "Copied to the clipboard"
                );
            }
        }
    }

    void _showSuccessSnackbar({
        @required BuildContext context,
        @required String text
    }) {
        var scaffold = Scaffold.of(context, nullOk: true);
        if (scaffold != null) {
            scaffold.showSnackBar(
                SnackBar(
                    content: Row(
                        children: <Widget>[
                            Icon(
                                Icons.check_circle_outline,
                                size: 24,
                            ),
                            SizedBox(width: 8),
                            Expanded(
                                child: Text(text)
                            )
                        ],
                    )
                )
            );
        }
    }
}

Future<bool> showCopyMenu({
    BuildContext context,
    Offset pressedPosition
}) {
    var x = pressedPosition.dx;
    var y = pressedPosition.dy;

    return showMenu<bool>(
        context: context,
        position: RelativeRect.fromLTRB(x, y, x + 1, y + 1),
        items: [
            PopupMenuItem<bool>(value: true, child: Text("Copy")),
        ]
    );
}