Flutter showMenu() x 轴位置

Question

我有一个生成以下内容的 Gridview 构建器，我有一个带有 onLongPress 的 GestureDetector，它显示菜单如下：

我能够将菜单与gridview的各个元素对齐，例如，如果我长按绿色框，它应该在框下方显示菜单：

但是，我无法设置水平 x 位置。

如果我设置 L 或 R 的值，它会将菜单移动到最左边或最右边，这不是我想要的。我想将菜单居中到绿色框 x 轴的中间。

onLongPress: () {
        RenderBox box = key.currentContext.findRenderObject();
        double h = double.parse(box.size.height.toString());
        Offset position =
            box.localToGlobal(Offset.zero); //this is global position
        double y = position.dy;
        double x = position.dx;
        double w = double.parse(box.size.width.toString());

        print(x);
        showMenu(
            context: context,
            position: new RelativeRect.fromLTRB(x, 0, y + h, 0),
            items: <PopupMenuEntry>[
              PopupMenuItem(
                value: 1,
                child: Row(
                  children: <Widget>[
                    Icon(Icons.delete),
                    Text("Delete"),
                  ],
                ),
              )
            ]);
      },

简而言之，我想做这样的事情：

  body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          
          Expanded(
            child: GridView.builder(
              shrinkWrap: false,
              itemCount: data.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 10.0 / 10.0,
                crossAxisCount: 2,
              ),
              itemBuilder: (BuildContext context, int index) {
                GlobalKey _key = GlobalKey();

                return Padding(
                  padding: EdgeInsets.all(10),
                  child: CustomCard(data[index], _key),
                );
              },
            ),
          ),
        ],
      ),
    );

自定义卡片

 return GestureDetector(
      onTapDown: _storePosition,
      onLongPress: () {
      
        showMenu(
            context: context,
            position:null,
            items: <PopupMenuEntry>[
              PopupMenuItem(
                value: 1,
                child: Row(
                  children: <Widget>[
                    Icon(Icons.delete),
                    Text("Delete"),
                  ],
                ),
              )
            ]);
      },
      child: Card(
        color: d.color,
        elevation: 5,
        semanticContainer: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        clipBehavior: Clip.antiAlias,
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text(
                d.title,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
              ),
            
             
            ],
          ),
        ),
      ),
    );

Answer 1

这对我有用，我将width / 2 用于left 和right，并将top 设置为y + h + 20（20 给它额外的空间）来自top .

                    position: new RelativeRect.fromLTRB(
                        w / 2, y + h + 20, w / 2, 0),

这是Container 上的完整工作 Code，还有一些height 和width。

            GestureDetector(
              onLongPress: () {
                RenderBox box = key.currentContext.findRenderObject();
                double h = double.parse(box.size.height.toString());
                Offset position = box.localToGlobal(
                    Offset.zero); //this is global position
                double y = position.dy;
                double x = position.dx;
                double w = double.parse(box.size.width.toString());
                showMenu(
                    context: context,
                    position: new RelativeRect.fromLTRB(
                        w / 2, y + h + 20, w / 2, 0),
                    items: <PopupMenuEntry>[
                      PopupMenuItem(
                        value: 1,
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.delete),
                            Text("Delete"),
                          ],
                        ),
                      )
                    ]);
              },
              child: new Container(
                key: key,
                color: Colors.red,
                height: 120,
                width: 300,
                child: Center(child: new Text("Tap Me")),
              ),
            ),