mod: longPress enlarge img

lib/common/widgets/animated_dialog.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+class AnimatedDialog extends StatefulWidget {
+  const AnimatedDialog({Key? key, required this.child}) : super(key: key);
+
+  final Widget child;
+
+  @override
+  State<StatefulWidget> createState() => AnimatedDialogState();
+}
+
+class AnimatedDialogState extends State<AnimatedDialog>
+    with SingleTickerProviderStateMixin {
+  late AnimationController? controller;
+  late Animation<double>? opacityAnimation;
+  late Animation<double>? scaleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    controller = AnimationController(
+        vsync: this, duration: const Duration(milliseconds: 800));
+    opacityAnimation = Tween<double>(begin: 0.0, end: 0.6).animate(
+        CurvedAnimation(parent: controller!, curve: Curves.easeOutExpo));
+    scaleAnimation =
+        CurvedAnimation(parent: controller!, curve: Curves.easeOutExpo);
+    controller!.addListener(() => setState(() {}));
+    controller!.forward();
+  }
+
+  @override
+  void dispose() {
+    controller!.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.black.withOpacity(opacityAnimation!.value),
+      child: Center(
+        child: FadeTransition(
+          opacity: scaleAnimation!,
+          child: ScaleTransition(
+            scale: scaleAnimation!,
+            child: widget.child,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/common/widgets/overlay_pop.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:pilipala/common/constants.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+
+class OverlayPop extends StatelessWidget {
+  var videoItem;
+  OverlayPop({super.key, this.videoItem});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 8.0),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.background,
+        borderRadius: BorderRadius.circular(6.0),
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(6.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            NetworkImgLayer(
+              width: (MediaQuery.of(context).size.width - 16),
+              height: (MediaQuery.of(context).size.width - 16) /
+                  StyleString.aspectRatio,
+              src: videoItem.pic!,
+            ),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(12, 15, 10, 15),
+              child: Text(
+                videoItem.title!,
+                // maxLines: 1,
+                // overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/common/widgets/video_card_h.dart

@@ -8,78 +8,94 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
 // 视频卡片 - 水平布局
 class VideoCardH extends StatelessWidget {
   var videoItem;
+  Function()? longPress;
+  Function()? longPressEnd;
 
-  VideoCardH({Key? key, required this.videoItem}) : super(key: key);
+  VideoCardH({
+    Key? key,
+    required this.videoItem,
+    this.longPress,
+    this.longPressEnd,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Material(
       child: Ink(
-        child: InkWell(
+        child: GestureDetector(
-          onTap: () async {
+          onLongPress: () {
-            await Future.delayed(const Duration(milliseconds: 200));
+            longPress!();
-            int aid = videoItem['id'] ?? videoItem['aid'];
-            Get.toNamed('/video?aid=$aid', arguments: {'videoItem': videoItem});
           },
-          child: Container(
+          onLongPressEnd: (details) {
-            padding: const EdgeInsets.fromLTRB(
+            longPressEnd!();
-                StyleString.cardSpace, 5, StyleString.cardSpace, 5),
+          },
-            child: LayoutBuilder(builder: (context, boxConstraints) {
+          child: InkWell(
-              double width =
+            onTap: () async {
-                  (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2;
+              await Future.delayed(const Duration(milliseconds: 200));
-              return SizedBox(
+              int aid = videoItem['id'] ?? videoItem['aid'];
-                height: width / StyleString.aspectRatio,
+              Get.toNamed('/video?aid=$aid',
-                child: Row(
+                  arguments: {'videoItem': videoItem});
-                  mainAxisAlignment: MainAxisAlignment.start,
+            },
-                  crossAxisAlignment: CrossAxisAlignment.start,
+            child: Container(
-                  children: [
+              padding: const EdgeInsets.fromLTRB(
-                    AspectRatio(
+                  StyleString.cardSpace, 5, StyleString.cardSpace, 5),
-                      aspectRatio: StyleString.aspectRatio,
+              child: LayoutBuilder(builder: (context, boxConstraints) {
-                      // child: ClipRRect(
+                double width =
-                      //   borderRadius: StyleString.mdRadius,
+                    (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2;
-                      child: LayoutBuilder(
+                return SizedBox(
-                        builder: (context, boxConstraints) {
+                  height: width / StyleString.aspectRatio,
-                          double maxWidth = boxConstraints.maxWidth;
+                  child: Row(
-                          double maxHeight = boxConstraints.maxHeight;
+                    mainAxisAlignment: MainAxisAlignment.start,
-                          double PR = MediaQuery.of(context).devicePixelRatio;
+                    crossAxisAlignment: CrossAxisAlignment.start,
-                          return Stack(
+                    children: [
-                            children: [
+                      AspectRatio(
-                              NetworkImgLayer(
+                        aspectRatio: StyleString.aspectRatio,
-                                // src: videoItem['pic'] +
+                        // child: ClipRRect(
-                                //     '@${(maxWidth * 2).toInt()}w',
+                        //   borderRadius: StyleString.mdRadius,
-                                src: videoItem['pic'] + '@.webp',
+                        child: LayoutBuilder(
-                                width: maxWidth,
+                          builder: (context, boxConstraints) {
-                                height: maxHeight,
+                            double maxWidth = boxConstraints.maxWidth;
-                              ),
+                            double maxHeight = boxConstraints.maxHeight;
-                              // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,),
+                            double PR = MediaQuery.of(context).devicePixelRatio;
-                              Positioned(
+                            return Stack(
-                                right: 4,
+                              children: [
-                                bottom: 4,
+                                NetworkImgLayer(
-                                child: Container(
+                                  // src: videoItem['pic'] +
-                                  padding: const EdgeInsets.symmetric(
+                                  //     '@${(maxWidth * 2).toInt()}w',
-                                      vertical: 1, horizontal: 6),
+                                  src: videoItem['pic'] + '@.webp',
-                                  decoration: BoxDecoration(
+                                  width: maxWidth,
-                                      borderRadius: BorderRadius.circular(4),
+                                  height: maxHeight,
-                                      color: Colors.black54.withOpacity(0.4)),
-                                  child: Text(
-                                    Utils.timeFormat(videoItem['duration']!),
-                                    style: const TextStyle(
-                                        fontSize: 11, color: Colors.white),
-                                  ),
                                 ),
-                              )
+                                // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,),
-                            ],
+                                Positioned(
-                          );
+                                  right: 4,
-                        },
+                                  bottom: 4,
+                                  child: Container(
+                                    padding: const EdgeInsets.symmetric(
+                                        vertical: 1, horizontal: 6),
+                                    decoration: BoxDecoration(
+                                        borderRadius: BorderRadius.circular(4),
+                                        color: Colors.black54.withOpacity(0.4)),
+                                    child: Text(
+                                      Utils.timeFormat(videoItem['duration']!),
+                                      style: const TextStyle(
+                                          fontSize: 11, color: Colors.white),
+                                    ),
+                                  ),
+                                )
+                              ],
+                            );
+                          },
+                        ),
+                        // ),
                       ),
-                      // ),
+                      VideoContent(videoItem: videoItem)
-                    ),
+                    ],
-                    VideoContent(videoItem: videoItem)
+                  ),
-                  ],
+                );
-                ),
+              }),
-              );
+              // height: 124,
-            }),
+            ),
-            // height: 124,
           ),
         ),
       ),

lib/common/widgets/video_card_v.dart

@@ -10,8 +10,15 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
 // 视频卡片 - 垂直布局
 class VideoCardV extends StatelessWidget {
   var videoItem;
+  Function()? longPress;
+  Function()? longPressEnd;
 
-  VideoCardV({Key? key, required this.videoItem}) : super(key: key);
+  VideoCardV({
+    Key? key,
+    required this.videoItem,
+    this.longPress,
+    this.longPressEnd,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -22,58 +29,63 @@ class VideoCardV extends StatelessWidget {
         borderRadius: StyleString.mdRadius,
       ),
       margin: EdgeInsets.zero,
-      child: InkWell(
+      child: GestureDetector(
-        onTap: () async {
-          await Future.delayed(const Duration(milliseconds: 200));
-          Get.toNamed('/video?aid=${videoItem.id}',
-              arguments: {'videoItem': videoItem});
-        },
         onLongPress: () {
-          print('长按');
+          longPress!();
         },
-        child: Column(
+        onLongPressEnd: (details) {
-          children: [
+          longPressEnd!();
-            ClipRRect(
+        },
-              borderRadius: const BorderRadius.only(
+        child: InkWell(
-                topLeft: StyleString.imgRadius,
+          onTap: () async {
-                topRight: StyleString.imgRadius,
+            await Future.delayed(const Duration(milliseconds: 200));
-              ),
+            Get.toNamed('/video?aid=${videoItem.id}',
-              child: AspectRatio(
+                arguments: {'videoItem': videoItem});
-                aspectRatio: StyleString.aspectRatio,
+          },
-                child: LayoutBuilder(builder: (context, boxConstraints) {
+          child: Column(
-                  double maxWidth = boxConstraints.maxWidth;
+            children: [
-                  double maxHeight = boxConstraints.maxHeight;
+              ClipRRect(
-                  double PR = MediaQuery.of(context).devicePixelRatio;
+                borderRadius: const BorderRadius.only(
-                  return Stack(
+                  topLeft: StyleString.imgRadius,
-                    children: [
+                  topRight: StyleString.imgRadius,
-                      NetworkImgLayer(
+                ),
-                        // 指定图片尺寸
+                child: AspectRatio(
-                        // src: videoItem.pic + '@${(maxWidth * 2).toInt()}w',
+                  aspectRatio: StyleString.aspectRatio,
-                        src: videoItem.pic + '@.webp',
+                  child: LayoutBuilder(builder: (context, boxConstraints) {
-                        width: maxWidth,
+                    double maxWidth = boxConstraints.maxWidth;
-                        height: maxHeight,
+                    double maxHeight = boxConstraints.maxHeight;
-                      ),
+                    double PR = MediaQuery.of(context).devicePixelRatio;
-                      Positioned(
+                    return Stack(
-                        left: 0,
+                      children: [
-                        right: 0,
+                        NetworkImgLayer(
-                        bottom: 0,
+                          // 指定图片尺寸
-                        child: AnimatedOpacity(
+                          // src: videoItem.pic + '@${(maxWidth * 2).toInt()}w',
-                          opacity: 1,
+                          src: videoItem.pic + '@.webp',
-                          duration: const Duration(milliseconds: 200),
+                          width: maxWidth,
-                          child: VideoStat(
+                          height: maxHeight,
-                            view: videoItem.stat.view,
-                            danmaku: videoItem.stat.danmaku,
-                            duration: videoItem.duration,
-                          ),
                         ),
-                      )
+                        Positioned(
-                    ],
+                          left: 0,
-                  );
+                          right: 0,
-                }),
+                          bottom: 0,
+                          child: AnimatedOpacity(
+                            opacity: 1,
+                            duration: const Duration(milliseconds: 200),
+                            child: VideoStat(
+                              view: videoItem.stat.view,
+                              danmaku: videoItem.stat.danmaku,
+                              duration: videoItem.duration,
+                            ),
+                          ),
+                        )
+                      ],
+                    );
+                  }),
+                ),
               ),
-            ),
+              VideoContent(videoItem: videoItem)
-            VideoContent(videoItem: videoItem)
+            ],
-          ],
+          ),
         ),
       ),
     );

lib/pages/home/controller.dart

@@ -12,6 +12,7 @@ class HomeController extends GetxController {
   RxList<RecVideoItemModel> videoList = [RecVideoItemModel()].obs;
   bool isLoadingMore = false;
   bool flag = false;
+  OverlayEntry? popupDialog;
 
   @override
   void onInit() {

lib/pages/home/view.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/common/skeleton/video_card_v.dart';
+import 'package:pilipala/common/widgets/animated_dialog.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/common/widgets/overlay_pop.dart';
 import 'package:pilipala/common/widgets/video_card_v.dart';
+import 'package:pilipala/models/models_rec_video_item.dart';
 import './controller.dart';
 import 'package:pilipala/common/constants.dart';
 import 'package:pilipala/pages/home/widgets/app_bar.dart';
@@ -84,7 +88,18 @@ class _HomePageState extends State<HomePage>
                 delegate: SliverChildBuilderDelegate(
                   (BuildContext context, int index) {
                     return videoList.isNotEmpty
-                        ? VideoCardV(videoItem: videoList[index])
+                        ? VideoCardV(
+                            videoItem: videoList[index],
+                            longPress: () {
+                              _homeController.popupDialog =
+                                  _createPopupDialog(videoList[index]);
+                              Overlay.of(context)
+                                  .insert(_homeController.popupDialog!);
+                            },
+                            longPressEnd: () {
+                              _homeController.popupDialog?.remove();
+                            },
+                          )
                         : const VideoCardVSkeleton();
                   },
                   childCount: videoList.isNotEmpty ? videoList.length : 10,
@@ -98,6 +113,14 @@ class _HomePageState extends State<HomePage>
       // ),
     );
   }
+
+  OverlayEntry _createPopupDialog(RecVideoItemModel videoItem) {
+    return OverlayEntry(
+      builder: (context) => AnimatedDialog(
+        child: OverlayPop(videoItem: videoItem),
+      ),
+    );
+  }
 }
 
 class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {

lib/pages/hot/controller.dart

@@ -11,6 +11,7 @@ class HotController extends GetxController {
   RxList videoList = [].obs;
   bool isLoadingMore = false;
   bool flag = false;
+  OverlayEntry? popupDialog;
 
   @override
   void onInit() {

lib/pages/hot/view.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:pilipala/common/widgets/animated_dialog.dart';
+import 'package:pilipala/common/widgets/overlay_pop.dart';
 import 'package:pilipala/common/widgets/video_card_h.dart';
 import 'package:pilipala/pages/hot/controller.dart';
 import 'package:pilipala/pages/home/widgets/app_bar.dart';
@@ -56,6 +58,14 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
                 delegate: SliverChildBuilderDelegate((context, index) {
               return VideoCardH(
                 videoItem: videoList[index],
+                longPress: () {
+                  _hotController.popupDialog =
+                      _createPopupDialog(videoList[index]);
+                  Overlay.of(context).insert(_hotController.popupDialog!);
+                },
+                longPressEnd: () {
+                  _hotController.popupDialog?.remove();
+                },
               );
             }, childCount: videoList.length)),
             SliverToBoxAdapter(
@@ -68,4 +78,12 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
       ),
     );
   }
+
+  OverlayEntry _createPopupDialog(videoItem) {
+    return OverlayEntry(
+      builder: (context) => AnimatedDialog(
+        child: OverlayPop(videoItem: videoItem),
+      ),
+    );
+  }
 }