Flutter-长按PopupMenu [英] Flutter - PopupMenu on long press

问题描述

我正在制作图片库，我需要用户能够长按图片以显示弹出菜单，以便他删除图片。

I'm making an image gallery and I need the user to be able to long-press an image to show a popup menu which will let him delete the image.

到目前为止，我的代码：

My code, so far:

  return GestureDetector(
    onLongPress: () {
      showMenu(
        items: <PopupMenuEntry>[
          PopupMenuItem(
            value: this._index,
            child: Row(
              children: <Widget>[
                Icon(Icons.delete),
                Text("Delete"),
              ],
            ),
          )
        ],
        context: context,
      );
    },
    child: Image.memory(
      this._asset.thumbData.buffer.asUint8List(),
      fit: BoxFit.cover,
      gaplessPlayback: true,
    ),
  );

哪个产生：

Which produces:

但是，当调用longPress函数时，我无法找出如何完全删除图像的小部件。

But also, I couldn't find out how to completely remove the image's widget when the longPress function is called. How to do so?

推荐答案

如果要使用gridView或listview在屏幕上布置图像，您将可以用手势检测器包装每个项目，然后将图像保存在列表中的某个位置，然后从列表中删除图像并调用setState（）。

If you are going to use a gridView or listview for laying out the images on the screen, you can wrap each item with a gesture detector then you should keep your images in a list somewhere, then simply remove the image from the list and call setState().

类似下列。 （这段代码可能不会编译，但应该会告诉您）

Something like the following. (This code will probably won't compile but it should give you the idea)

    ListView.builder(
        itemCount: imageList.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
                onLongPress: () {
                  showMenu(
                    onSelected: () => setState(() => imageList.remove(index))}
                    items: <PopupMenuEntry>[
                      PopupMenuItem(
                        value: this._index,
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.delete),
                            Text("Delete"),
                          ],
                        ),
                      )
                    ],
                    context: context,
                  );
                },
                child: imageList[index],
            );
          }
       )

编辑：您也可以使用弹出菜单，例如following

You can use a popup menu too, like following

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
  height: 100,
  width: 100,
  child: PopupMenuButton(
    child: FlutterLogo(),
    itemBuilder: (context) {
      return <PopupMenuItem>[new PopupMenuItem(child: Text('Delete'))];
    },
  ),
),

这篇关于Flutter-长按PopupMenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！