时间戳

首页 > 解决方案 > 单击图标按钮小部件时显示弹出菜单 Flutter

flutter - 单击图标按钮小部件时显示弹出菜单 Flutter

问题描述

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

showDialog<void>(
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Update details'),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
      content: StatefulBuilder(
        builder: (context, setState) { return Container(
          width: 400,
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                          width: 100.0,
                          height: 100.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.cover,
                                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.darken),
                                  image: data != null ? MemoryImage(data) : AssetImage("web/icons/contactsDefaultImage.png")
                              )
                          )
                      ),
                      IconButton(icon: Icon(Icons.edit), onPressed: () async {
                         //display option here
                         _showPopupMenu();
                      })
                    ]),
                Container(
                  child: TextFormField(
                    decoration: InputDecoration(
                        labelText: 'name'
                    ),
                  ),
                ),
                TextFormField(
                  decoration: InputDecoration(
                      labelText: 'email'
                  ),
                ),
              ],
            ),
          ),
        );},
      ),
      actions: <Widget>[
        FlatButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(child: Text('Save'),
          onPressed: () {
          // save
          },
        )
      ],
    );
  },
);

我试图为此使用 showMenu。但是由于该位置必须是硬编码的，所以我不打算使用它。我尝试了什么：

void _showPopupMenu() async {
await showMenu(
  context: context,
  position: RelativeRect.fromLTRB(100, 100, 100, 100),
  items: [
    PopupMenuItem(
      child: Text("add"),
    ),
    PopupMenuItem(
      child: Text("remove"),
    ),
  ],
  elevation: 8.0,
);

}

现在，我想知道的是如何在点击图标按钮的位置显示它（无需对值进行硬编码）。还有另一种方法吗？即不使用showMenu。

标签： flutterdart

解决方案

您可以编写这样的方法并在您的图标按钮上调用它onPressed

showPopupMenu(){
    showMenu<String>(
      context: context,
      position: RelativeRect.fromLTRB(25.0, 25.0, 0.0, 0.0),  //position where you want to show the menu on screen
      items: [
        PopupMenuItem<String>(
            child: const Text('menu option 1'), value: '1'),
        PopupMenuItem<String>(
            child: const Text('menu option 2'), value: '2'),
        PopupMenuItem<String>(
            child: const Text('menu option 3'), value: '3'),
      ],
      elevation: 8.0,
    )
    .then<void>((String itemSelected) {

      if (itemSelected == null) return;

      if(itemSelected == "1"){
        //code here
      }else if(itemSelected == "2"){
        //code here
      }else{
        //code here
      }

    });
}

编辑：（在用户点击的位置显示菜单）

我们可以有这样的方法 -

void showPopUpMenuAtTap(BuildContext context, TapDownDetails details) {
  showMenu(
    context: context,
    position: RelativeRect.fromLTRB(
      details.globalPosition.dx,
      details.globalPosition.dy,
      details.globalPosition.dx,
      details.globalPosition.dy,
    ),
    // other code as above
  );
}

并GestureDetector像这样使用它 -

GestureDetector(
  child: const Icon(Icons.menu),
  onTapDown: (details) => showPopUpMenuAtPosition(context, details),
);

推荐阅读