Browse Source

[feat]亲密度分析,图片预览页,使用PhotoViewGallery,而不是PageView嵌套PhotoView,解决手势冲突问题

hezihao 7 months ago
parent
commit
a37669d861

+ 0 - 8
lib/module/intimacy_analyse/image_viewer/image_viewer_controller.dart

@@ -5,8 +5,6 @@ import 'package:flutter/cupertino.dart';
 import 'package:get/get.dart';
 import 'package:injectable/injectable.dart';
 import 'package:keyboard/base/base_controller.dart';
-import 'package:photo_view/photo_view.dart';
-
 import '../../../data/bean/image_viewer_item.dart';
 import '../../../router/app_page_arguments.dart';
 import '../../../utils/atmob_log.dart';
@@ -24,9 +22,6 @@ class ImageViewerController extends BaseController {
 
   late PageController pageController;
 
-  /// 缓存每一页的PhotoViewController
-  final Map<int, PhotoViewController> photoViewControllers = {};
-
   @override
   void onInit() {
     super.onInit();
@@ -37,9 +32,6 @@ class ImageViewerController extends BaseController {
   void onClose() {
     // 销毁每个PhotoViewController
     pageController.dispose();
-    for (var controller in photoViewControllers.values) {
-      controller.dispose();
-    }
     super.onClose();
   }
 

+ 32 - 29
lib/module/intimacy_analyse/image_viewer/image_viewer_page.dart

@@ -8,6 +8,7 @@ import 'package:keyboard/resource/string.gen.dart';
 import 'package:keyboard/router/app_page_arguments.dart';
 import 'package:keyboard/router/app_pages.dart';
 import 'package:photo_view/photo_view.dart';
+import 'package:photo_view/photo_view_gallery.dart';
 
 import '../../../resource/assets.gen.dart';
 import 'image_viewer_controller.dart';
@@ -48,24 +49,48 @@ class ImageViewerPage extends BasePage<ImageViewerController> {
   @override
   Widget buildBody(BuildContext context) {
     return Scaffold(
+      backgroundColor: backgroundColor(),
       body: Stack(
         children: [
           // 预览图
           Obx(() {
-            return PageView.builder(
-              controller: controller.pageController,
+            return PhotoViewGallery.builder(
+              // 滚动特性
+              scrollPhysics: const BouncingScrollPhysics(),
+              // 页面数量
               itemCount: controller.imageViewerItemList.length,
+              // 禁止旋转
+              enableRotation: false,
+              loadingBuilder:
+                  (context, event) => Center(
+                    child: SizedBox(
+                      width: 20.0,
+                      height: 20.0,
+                      child: CircularProgressIndicator(
+                        value:
+                            event == null
+                                ? 0
+                                : event.cumulativeBytesLoaded /
+                                    (event.expectedTotalBytes ?? 0),
+                      ),
+                    ),
+                  ),
               onPageChanged: (index) {
                 // 更新当前索引
                 controller.updateCurrentIndex(index);
               },
-              itemBuilder: (context, index) {
-                // 构建每一个PhotoView
-                return _buildPhotoView(
-                  controller.imageViewerItemList[index],
-                  index,
+              builder: (BuildContext context, int index) {
+                return PhotoViewGalleryPageOptions(
+                  minScale: PhotoViewComputedScale.contained,
+                  maxScale: PhotoViewComputedScale.covered * 2,
+                  imageProvider: controller.getImageProvider(
+                    controller.imageViewerItemList[index],
+                  ),
+                  initialScale: PhotoViewComputedScale.contained * 0.8,
                 );
               },
+              backgroundDecoration: BoxDecoration(color: ColorName.black),
+              pageController: controller.pageController,
             );
           }),
           // 指示器
@@ -160,26 +185,4 @@ class ImageViewerPage extends BasePage<ImageViewerController> {
       ),
     );
   }
-
-  /// 每一页的PhotoView
-  Widget _buildPhotoView(ImageViewerItem item, int index) {
-    final photoViewController = controller.photoViewControllers.putIfAbsent(
-      index,
-      () => PhotoViewController(),
-    );
-
-    return PhotoView(
-      // 设置图片ImageProvider
-      imageProvider: controller.getImageProvider(item),
-      controller: photoViewController,
-      minScale: PhotoViewComputedScale.contained,
-      maxScale: PhotoViewComputedScale.covered * 2,
-      // 禁止旋转
-      enableRotation: false,
-      // 背景色
-      backgroundDecoration: BoxDecoration(color: ColorName.black),
-      // 加载中
-      loadingBuilder: (_, __) => Center(child: CircularProgressIndicator()),
-    );
-  }
 }