Question

我创建了一个警报对话框，用户可以在其中更新其个人资料详细信息。在带有图像容器的容器中，有一个图标按钮小部件。我要的是当用户单击图标按钮时，将显示带有添加/删除图像选项的弹出菜单。这是我的警报对话框代码：

showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
  return AlertDialog(
      title: Text('Edit detail'),
      content: StatefulBuilder(
        builder: (context, setState) {
          return Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        //image container
                      ),
                      GestureDetector(
                        // the pop up menu displays away from alert dialog
                        onTapDown: (TapDownDetails details) {
                          if (imageData != null) {
                            _showPopupMenu(details.globalPosition);
                            print('choose image/remove image');
                          } else {}
                        },
                        child: IconButton(icon: Icon(Icons.edit),
                            onPressed: () async {}),
                      )
                    ]),
              ],
            ),
          );
        },
      ),
      actions: <Widget>[
    //action button
  )],
  );
},);

这是弹出菜单的代码。

void _showPopupMenu(Offset offset) async {
double left = offset.dx;
double top = offset.dy;
await showMenu<String>(
  context: context,
  position: RelativeRect.fromLTRB(left, top, 0.0, 0.0),      //position where want to show the menu on screen
  items: [
    PopupMenuItem<String>(
        child: const Text('Add image'), value: '1'),
    PopupMenuItem<String>(
        child: const Text('Delete image'), value: '2'),
  ],
  elevation: 8.0,
)
    .then<void>((String itemSelected) {

  if (itemSelected == null) return;

  if(itemSelected == "1"){
  } else {
  }

});}

菜单显示在警报对话框之外。我已经看到过类似的手势检测器帖子，但是我似乎无法理解我的错误。请帮助我，欢迎任何改进。预先感谢。

Answer 1

您可以使用AlertDialog和IconButton的键进行以下操作

 GlobalKey cKey = new GlobalKey();
 GlobalKey pKey = new GlobalKey();

  void _showPopupMenu() async {
    await showMenu<String>(
      context: context,
      position: RelativeRect.fromRect(_getWidgetGlobalRect(pKey),_getWidgetGlobalRect(cKey)),
      items: [
        PopupMenuItem<String>(child: const Text('Add image'), value: '1'),
        PopupMenuItem<String>(child: const Text('Delete image'), value: '2'),
      ],
      elevation: 8.0,
    ).then<void>((String itemSelected) {
      if (itemSelected == null) return;

      if (itemSelected == "1") {
      } else {}
    });
  }

  Rect _getWidgetGlobalRect(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    var offset = renderBox.localToGlobal(Offset.zero);
    return Rect.fromLTWH(
        offset.dx, offset.dy, renderBox.size.width, renderBox.size.height);
  }

  void showDialig() {
    showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          key: cKey,
          title: Text('Edit detail'),
          content: StatefulBuilder(
            builder: (context, setState) {
              return Container(
                child: Column(

                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Stack(alignment: Alignment.topRight, children: [

                      Container(
                          //image container
                          ),
                      GestureDetector(
                        // the pop up menu displays away from alert dialog
                        onTapDown: (TapDownDetails details) {
                          _showPopupMenu();
                        },
                        child: IconButton(
                            key: pKey,
                            icon: Icon(Icons.edit),
                            onPressed: () async {}),
                      )
                    ]),
                  ],
                ),
              );
            },
          ),
          actions: <Widget>[
            //action button
          ],
        );
      },
    );
  }

如何显示单击图标按钮小部件的弹出菜单

1 个答案: