add context menu

lib/material/gallery.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:momo/models/image_list_resp.dart';
@@ -6,6 +7,10 @@ import 'package:momo/models/image_resp.dart';
 import 'package:momo/provider/rerender.dart';
 import 'package:momo/request/http_client.dart';
 
+/// A builder that includes an Offset to draw the context menu at.
+typedef ContextMenuBuilder = Widget Function(
+    BuildContext context, Offset offset);
+
 class Gallery extends ConsumerWidget {
   const Gallery({Key? key}) : super(key: key);
 
@@ -85,21 +90,145 @@ class _ImageGridState extends State<ImageGrid> {
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: MediaQuery.of(context).size.width > 640 ? 5 : 3),
         itemBuilder: (BuildContext context, int index) {
-          return InkWell(
+          return ImageItem(image: imageList[index]);
-            onTap: () {
-              context.go(Uri(
-                      path: "/detail",
-                      queryParameters: {"id": "${imageList[index].id}"})
-                  .toString());
-            },
-            child: Image.network(
-              "${dio.options.baseUrl}/image/thumbnail/${imageList[index].file_path}",
-              fit: BoxFit.cover,
-              errorBuilder: (BuildContext context, o, err) {
-                return const Icon(Icons.error_outline);
-              },
-            ),
-          );
         });
   }
 }
+
+class ImageItem extends ConsumerStatefulWidget {
+  const ImageItem({Key? key, required this.image}) : super(key: key);
+  final ImageResp image;
+
+  @override
+  ConsumerState<ImageItem> createState() => _ImageItemState();
+}
+
+class _ImageItemState extends ConsumerState<ImageItem> {
+  final ContextMenuController _contextMenuController = ContextMenuController();
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    if (_contextMenuController.isShown) {
+      _contextMenuController.remove();
+    }
+
+    super.dispose();
+  }
+
+  void _showContextMenu(Offset position) {
+    _contextMenuController.show(
+      context: context,
+      contextMenuBuilder: (BuildContext context) {
+        return AdaptiveTextSelectionToolbar.buttonItems(
+          anchors: TextSelectionToolbarAnchors(
+            primaryAnchor: position,
+          ),
+          buttonItems: <ContextMenuButtonItem>[
+            ContextMenuButtonItem(
+              onPressed: () {
+                ContextMenuController.removeAny();
+                showDialog(
+                    context: context,
+                    builder: (BuildContext context) => AlertDialog(
+                          title: const Text('删除图片'),
+                          content: const Text("确认删除图片"),
+                          actions: [
+                            TextButton(
+                              onPressed: () => Navigator.pop(context, 'Cancel'),
+                              child: const Text('Cancel'),
+                            ),
+                            TextButton(
+                              onPressed: () {
+                                Navigator.pop(context, 'OK');
+                                dio
+                                    .delete("/image/delete/${widget.image.id}")
+                                    .then((resp) {
+                                  ref
+                                      .read(uniqueIdProvider.notifier)
+                                      .updateId();
+                                  // context.go("/");
+                                });
+                              },
+                              child: const Text('OK'),
+                            ),
+                          ],
+                        ));
+                // _showDialog(context);
+              },
+              label: '删除',
+            ),
+            ContextMenuButtonItem(
+              onPressed: () {
+                ContextMenuController.removeAny();
+                // _showDialog(context);
+                Clipboard.setData(ClipboardData(
+                    text:
+                        "${dio.options.baseUrl}/image/${widget.image.file_path}"));
+                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                  content: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: const [
+                      Icon(
+                        Icons.check_circle,
+                        color: Colors.white,
+                      ),
+                      SizedBox(
+                        width: 10,
+                      ),
+                      Text("已拷贝到剪贴板")
+                    ],
+                  ),
+                  backgroundColor: Colors.lightGreen,
+                ));
+              },
+              label: '复制链接',
+            ),
+            ContextMenuButtonItem(
+              onPressed: () {
+                ContextMenuController.removeAny();
+                // _showDialog(context);
+              },
+              label: '查看详情',
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onSecondaryTapUp: (TapUpDetails details) {
+        print(details.globalPosition);
+        _showContextMenu(details.globalPosition);
+      },
+      onTap: () {
+        context.go(
+            Uri(path: "/detail", queryParameters: {"id": "${widget.image.id}"})
+                .toString());
+      },
+      child: Image.network(
+        "${dio.options.baseUrl}/image/thumbnail/${widget.image.file_path}",
+        fit: BoxFit.cover,
+        errorBuilder: (BuildContext context, o, err) {
+          return const Icon(Icons.error_outline);
+        },
+      ),
+    );
+  }
+}
+// class Textt extends StatefulWidget {
+//   const Textt({Key? key}) : super(key: key);
+//
+//   @override
+//   State<Textt> createState() => _TexttState();
+// }
+
+// class _TexttState extends State<Textt> {
+//   @override
+//   Widget build(BuildContext context) {
+//     // return const ContextMenuRegion(child: child, contextMenu: contextMenu);
+//   }
+// }

lib/material/router.dart

@@ -35,13 +35,19 @@ class MyMaterialRouterConfig {
                   }
                   return null;
                 },
-                routes: <RouteBase>[
+                // routes: <RouteBase>[
-                  GoRoute(
+                //   GoRoute(
-                      path: "detail",
+                //       path: "detail",
-                      name: "图片详情",
+                //       name: "图片详情",
-                      builder: (BuildContext context, GoRouterState state) =>
+                //       builder: (BuildContext context, GoRouterState state) =>
-                          const ImageDetail())
+                //           const ImageDetail())
-                ]),
+                // ]
+            ),
+            GoRoute(
+                path: "/detail",
+                name: "图片详情",
+                builder: (BuildContext context, GoRouterState state) =>
+                const ImageDetail()),
             GoRoute(
                 path: "/profile",
                 name: "个人资料",