[Bug report] 多图查看的时候 ，并且带长图的问题

[chenjiangmin]

Version

8.2.0

Platforms

Android, iOS

Device Model

Iphone 11(ios 16) Iphone 15(ios 17) oppo(android 13)

flutter info

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale zh-Hans-CN)
    • Flutter version 3.19.6 on channel stable at /Users/chenjiangmin/fvm/versions/3.19.6
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (4 周前), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/chenjiangmin/Library/Android/sdk
    • Platform android-34, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

How to reproduce?

我使用ExtendedImageGesturePageView 做图片预览功能

中间这个图是长图。 当我想上下滑动长图浏览的时候， 很容易触发左右滑动 到上一张图、或者下一张图。

Logs

没有错误日志

Example code (optional)

import 'dart:math';

import 'package:extended_image/extended_image.dart';
import 'package:flutter/widgets.dart';

import '../photo/core/photo_preview_utils.dart';

class TestImagePage extends StatefulWidget {
  const TestImagePage({super.key});

  @override
  State<TestImagePage> createState() => _TestImagePageState();
}

class _TestImagePageState extends State<TestImagePage> {
  /// 当前索引
  int index = 0;

  List<String> imageList = [
     "https://jk-feige-app.feigeblog.com/1715617100677_4582.JPG",
    "https://jk-feige-app.feigeblog.com/1715650772057_2610.jpg",
    "https://jk-feige-app.feigeblog.com/1715617101164_5800.JPG",
  ];

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return ExtendedImageSlidePage(
      slideAxis: SlideAxis.vertical,
      slideType: SlideType.wholePage,
      child: ExtendedImageGesturePageView.builder(
        controller: ExtendedPageController(
          initialPage: index,
          pageSpacing: 10,
          shouldIgnorePointerWhenScrolling: false,
        ),
        itemCount: imageList.length,
        onPageChanged: (int page) {
          index = page;
        },
        itemBuilder: (BuildContext context, int index) {
          String url = imageList[index];
          return ExtendedImage.network(
            url,
            fit: BoxFit.contain,
            mode: ExtendedImageMode.gesture,
            initGestureConfigHandler: (ExtendedImageState state) {
              double? initialScale = 1.0;
              if (state.extendedImageInfo != null) {
                initialScale = initScale(
                  size: size,
                  initialScale: initialScale,
                  imageSize: Size(
                    state.extendedImageInfo!.image.width.toDouble(),
                    state.extendedImageInfo!.image.height.toDouble(),
                  ),
                );
              }

              return GestureConfig(
                inPageView: true,
                minScale: 1.0,
                initialScale: initialScale!,
                inertialSpeed: 100.0,
                speed: 1.0,
                maxScale: max(initialScale, 5.0),
                animationMaxScale: max(initialScale, 5.0),
                initialAlignment: initialScale > 1 ? InitialAlignment.topCenter : InitialAlignment.center,
                cacheGesture: false,
              );
            },
          );
        },
        scrollDirection: Axis.horizontal,
        physics: const BouncingScrollPhysics(),
        canScrollPage: (GestureDetails? gestureDetails) {
          return imageList.length > 1;
        },
      ),
    );
  }
}

### Contact

[email protected]

[chenjiangmin]

5.15.1.mp4

[zmtzawqlp]

长图。建议初始化缩放比例，到刚好宽度匹配

[ZRXXUAN]

我用physics: const NeverScrollableScrollPhysics(), 禁止他滑动，然后使用

Container(
color: Colors.transparent,
// 若出现很长的图片在放大过程中容易左右滑动，解决自定义手势
child: GestureDetector(
onHorizontalDragStart: (DragStartDetails details) {
_startX = details.localPosition.dx;
},
onHorizontalDragUpdate: (DragUpdateDetails details) {
_dragDistance = details.localPosition.dx - _startX;
},
onHorizontalDragEnd: (DragEndDetails details) {
double screenWidth = MediaQuery.of(context).size.width;
if (_dragDistance.abs() > screenWidth * 0.25) {
if (_dragDistance > 0) {
// 向右滑动
if (currentIndex > 0) {
pageController.previousPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
} else if (_dragDistance < 0) {
// 向左滑动
if (currentIndex < widget.images.length - 1) {
pageController.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
}
}
_dragDistance = 0.0; // 重置拖动距离
},
child: ExtendedImageGesturePageView.builder(

这控制手指滑动到0.25的屏幕宽度的时候再进行换页面