显示菜单位置 Flutter

Question

我有一个 GridView 小部件，其中包含一些用 GestureDetector 包裹的 GridTiles，当我长按它时，尝试显示一个菜单以删除 GridTile ,,，一切都很好，除了我希望从我拥有的点开始显示该菜单点击的不是应用程序的顶部

    showMenu(
            context: context,
            position: ..........,// Here i want the solution
            items: [
              PopupMenuItem(
                child: FlatButton.icon(
                  onPressed: () {
                    _notesProv.deleteNote(id);
                    Navigator.of(context).pop();
                  },
                  icon: Icon(
                    Icons.delete,
                    color: Colors.black,
                  ),
                  label: Text(
                    'delete note',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ),
            ],
            color: Colors.green[100],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
            ));

Answer 1

请参阅代码中的注释以获取有关正在发生的情况的指导。

\n

无论哪里有注释，该代码都会添加到从 Flutter 官方食谱中窃取的Gridview 示例中示例 Gridview中，以便弹出您点击的菜单。

\n

class GridPositionPage extends StatefulWidget {\n  @override\n  _GridPositionPageState createState() => _GridPositionPageState();\n}\n\nclass _GridPositionPageState extends State<GridPositionPage> {\n\n  // \xe2\x86\x93 hold tap position, set during onTapDown, using getPosition() method\n  Offset tapXY;\n  // \xe2\x86\x93 hold screen size, using first line in build() method\n  RenderBox overlay;\n\n  @override\n  Widget build(BuildContext context) {\n    // \xe2\x86\x93 save screen size\n    overlay = Overlay.of(context).context.findRenderObject();\n\n    return BaseExamplePage(\n      title: \'Grid Position\',\n      child: GridView.count(\n        crossAxisCount: 2,\n        children: List.generate(100, (index) {\n          return Center(\n            child: InkWell(\n              child: Text(\n                \'Item $index\',\n                style: Theme.of(context).textTheme.headline5,\n              ),\n              // \xe2\x86\x93 save screen tap position now\n              onTapDown: getPosition,\n              onLongPress: () => showMenu(\n                  context: context,\n                  position: relRectSize,\n                  items: [\n                    PopupMenuItem(\n                      child: FlatButton.icon(\n                        label: Text(\'Delete\'),\n                        icon: Icon(Icons.delete),\n                      ),\n                    )\n                  ]\n              ),\n            ),\n          );\n        }),\n      ),\n    );\n  }\n\n  // \xe2\x86\x93 create the RelativeRect from size of screen and where you tapped\n  RelativeRect get relRectSize => RelativeRect.fromSize(tapXY & const Size(40,40), overlay.size);\n\n  // \xe2\x86\x93 get the tap position Offset\n  void getPosition(TapDownDetails detail) {\n    tapXY = detail.globalPosition;\n  }\n}\n

\n

Answer 2

我希望这有帮助。

GestureDetector(
 onLongPressStart: (details) async{
  final offset = details.globalPosition;

  showMenu(
    context: context,
    position: RelativeRect.fromLTRB(
      offset.dx,
      offset.dy,
      MediaQuery.of(context).size.width - offset.dx,
      MediaQuery.of(context).size.height - offset.dy,
    ),
    items: [
      PopupMenuItem(
        child: Text("0"),
      ),

      PopupMenuItem(
        child: Text("1"),
      ),

      PopupMenuItem(
        child: Text("2"),
      ),

    ]
);

},
 child: FaIcon(
   AppIcons.ellipseFa,
   size: 22,
 ),
)