Question

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

Traceback (most recent call last):
  File "face.py", line 1, in <module>
    import face_recognition
  File "/home/user/.local/lib/python3.7/site-packages/face_recognition/__init__.py", line 7, in <module>
    from .api import load_image_file, face_locations, batch_face_locations, face_landmarks, face_encodings, compare_faces, face_distance
  File "/home/user/.local/lib/python3.7/site-packages/face_recognition/api.py", line 4, in <module>
    import dlib
ImportError: Python version mismatch: module was compiled for version 3.8, while the interpreter is running version 3.7.

我试图为此使用showMenu。但是由于该职位必须进行硬编码，所以我不是要使用它。我尝试过的：

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。

Answer 1

您可以编写这样的方法，然后在图标按钮的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
      }

    });
}

Answer 2

您要查找的是showdialog和alertdialog。

Void<String> testdialog(BuildContext context) {
return showDialog(
    barrierDismissible: false,
    context: context,
    builder: (context) {
      return StatefulBuilder(builder: (context, setState) {
        return AlertDialog(
            title: ....

Answer 3

您可以选择很多选项：

您可以使用：

我希望它将对您有帮助

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

3 个答案: