Flutter - 长按和 PopupMenu 从 GridView 中删除图像

Question

我将如何继续从我的 GridView 对象中删除图像，长按会打开一个 PopupMenu，在其中我可以选择删除该照片？

到目前为止我的代码：

Widget gridView(){
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length + localFiles.length, (index) {
        if(index < localFiles.length){
          return GestureDetector(
            onLongPress: () {
              print("Hello");
            },
            child:  Container(
                margin: const EdgeInsets.all(1.0),
                decoration: BoxDecoration(
                  color: Colors.black12,
                  image: DecorationImage(
                    image: FileImage(File(localFiles[index])), fit: BoxFit.cover,
                  ),
                ),
              )
          );
        }
        return GestureDetector(
            onLongPress: () {
              print("Hello");
            },
            child:  Container(
              margin: const EdgeInsets.all(1.0),
              decoration: BoxDecoration(
                color: Colors.black12,
                image: DecorationImage(
                  image: NetworkImage(images[index-localFiles.length]), fit: BoxFit.cover,
                ),
              ),
            )
        );
      }),
    );

我的最终代码适用于需要找到类似问题的解决方案的任何人： （另外这里是来自包创建者的 FocusedMenuHolder 包的一个很好的资源来帮助你https://www.youtube.com/watch?v=Y2XyyJcSTQo）

    return GridView.count(
      crossAxisCount: 3,
      physics: BouncingScrollPhysics(),
      padding: const EdgeInsets.fromLTRB(1, 0, 1, 0),
      children: List.generate(images.length + localFiles.length, (index) {
        if(index < localFiles.length){
          return FocusedMenuHolder(
            blurSize: 2,
            blurBackgroundColor: Colors.black12,
            menuWidth: 200,
            duration: Duration(milliseconds: 200),
            onPressed: (){},
            menuItems: <FocusedMenuItem>[
              FocusedMenuItem(title: Text("Share"),trailingIcon: Icon(Icons.share) ,onPressed: (){

              }),
              FocusedMenuItem(title: Text("Delete",style: TextStyle(color: Colors.redAccent),),trailingIcon: Icon(Icons.delete,color: Colors.redAccent,) ,onPressed: (){}),
            ],
            child: Container(
                  margin: const EdgeInsets.all(1.0),
                  decoration: BoxDecoration(
                    color: Colors.black12,
                    image: DecorationImage(
                      image: FileImage(File(localFiles[index])), fit: BoxFit.cover,
                    ),
                  ),
                ),
            );
        }
        return Container(
          margin: const EdgeInsets.all(1.0),
          decoration: BoxDecoration(
            color: Colors.black12,
            image: DecorationImage(
              image: NetworkImage(images[index-localFiles.length]), fit: BoxFit.cover,
            ),
          ),
        );
      }),
    );

Answer 1

试试这个包，focused_menu 和 GridView：

      Expanded(
        child: GridView(
          physics: BouncingScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

               // Wrap each item (Card) with Focused Menu Holder
              .map((e) => FocusedMenuHolder(
                menuWidth: MediaQuery.of(context).size.width*0.50,
                blurSize: 5.0,
                menuItemExtent: 45,
                menuBoxDecoration: BoxDecoration(color: Colors.grey,borderRadius: BorderRadius.all(Radius.circular(15.0))),
                duration: Duration(milliseconds: 100),
                animateMenuItems: true,
                blurBackgroundColor: Colors.black54,
                openWithTap: true, // Open Focused-Menu on Tap rather than Long Press
                menuOffset: 10.0, // Offset value to show menuItem from the selected item
                bottomOffsetHeight: 80.0, // Offset height to consider, for showing the menu item ( for example bottom navigation bar), so that the popup menu will be shown on top of selected item.
                menuItems: <FocusedMenuItem>[
                  // Add Each FocusedMenuItem  for Menu Options
                  FocusedMenuItem(title: Text("Open"),trailingIcon: Icon(Icons.open_in_new) ,onPressed: (){
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>ScreenTwo()));
                  }),
                  FocusedMenuItem(title: Text("Share"),trailingIcon: Icon(Icons.share) ,onPressed: (){}),
                  FocusedMenuItem(title: Text("Favorite"),trailingIcon: Icon(Icons.favorite_border) ,onPressed: (){}),
                  FocusedMenuItem(title: Text("Delete",style: TextStyle(color: Colors.redAccent),),trailingIcon: Icon(Icons.delete,color: Colors.redAccent,) ,onPressed: (){}),
                ],
                onPressed: (){},
                child: Card(
                      child: Column(
                        children: <Widget>[
                          Image.asset("assets/images/image_$e.jpg"),
                        ],
                      ),
                    ),
              ))
              .toList(),
        ),
      ),

Answer 2

试试下面的代码sn-p

Widget gridView(){
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length + localFiles.length, (index) {
        if(index < localFiles.length){
          return GestureDetector(
            onLongPress: () {
              print("Hello");
            },
            child:  Container(
                margin: const EdgeInsets.all(1.0),
                decoration: BoxDecoration(
                  color: Colors.black12,
                  image: DecorationImage(
                    image: FileImage(File(localFiles[index])), fit: BoxFit.cover,
                  ),
                ),
              )
          );
        }
        return GestureDetector(
            onLongPress: () {
              setState(() {
                _buildPopupDialog();
              });
            },
            child:  Container(
              margin: const EdgeInsets.all(1.0),
              decoration: BoxDecoration(
                color: Colors.black12,
                image: DecorationImage(
                  image: NetworkImage(images[index-localFiles.length]), fit: BoxFit.cover,
                ),
              ),
            )
        );
      }),
    );

    

Widget _buildPopupDialog(BuildContext context) {
      return  AlertDialog(
        title: Text('Popup example'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Hello"),
          ],
        ),
        actions: [
            ElevatedButton(
            onPressed: () {
              print('Ok');
            },
            child: Text('Ok'),
          ),
           ElevatedButton(
            onPressed: () {
              print('Cancel');
            },
            child: Text('Close'),
          ),
        ],
      );
    }