Flutter 縮放圖像時停止 CarouselSlider 滾動

Question

在此閱讀器小部件中，我想更改滾動行為，以便如果我放大圖像並在周圍移動，除非我處於當前圖像邊界，否則 CarouselSlider 不會滑動到下一張圖像。

我試圖用我能找到的每一個來改變 scrollPhysics，但沒有成功。

這里有類似的問題，但沒有人回答這個問題。

如何在 flutter 中放大 carouselslider？

flutter 帶有 CarouselSlider 的 InteractiveViewer 很難捏縮放

這是處理輪播的方法：

  CarouselSlider buildCarouselSlider() {
    final double height = MediaQuery.of(context).size.height;
    return CarouselSlider.builder(
        itemCount: widget.file.pagesCount,
        itemBuilder: (context, index, pageViewIndex) => Center(
          child: PhotoView(
            imageProvider: CachedNetworkImageProvider(widget.file.pagesUrl[index]),
            onTapDown: (context, details, controllerValue) {
              // Hide app bar on scroll down
              setState(() {_showAppBar = !_showAppBar;});
            },
            backgroundDecoration: const BoxDecoration(color: Colors.black),
          ),
        ),
        options: CarouselOptions(
          autoPlay: false,
          enableInfiniteScroll: false,
          viewportFraction: 1.0,
          enlargeCenterPage: false,
          height: height,
          clipBehavior: Clip.hardEdge,
          pageSnapping: true,
          scrollDirection: _axis,
          initialPage: widget.file.currentPage,
          scrollPhysics: const PageScrollPhysics(),
        )
    );
  }

Answer 1

我有一個類似的問題，當我發現“extended_image”包（ https://pub.dev/packages/extended_image ）時，它允許用戶縮放並且僅當圖像邊界到達其末端時才會滑動到下一頁。

這里最重要的參數是GestureConfig，里面有很多屬性，但是我們需要的是inPageView。 如果設置為true，我們得到我們想要的output。 您可以在其官方頁面上了解更多信息。

完整代碼：-

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Image(),
    );
  }
}

class Image extends StatefulWidget {
  const Image({Key? key}) : super(key: key);
  @override
  _CubeState createState() => _CubeState();
}

class _CubeState extends State<Image> {
  List images = [
    "https://img.freepik.com/free-vector/space-game-background-neon-night-alien-landscape_107791-1624.jpg?w=1060&t=st=1673067224~exp=1673067824~hmac=f4f13bff7718874c4b643212bf53455221893a3796885adffd501d231286f651",
    "https://img.freepik.com/free-vector/abstract-splashed-watercolor-textured-background_53876-8725.jpg?w=1060&t=st=1673067234~exp=1673067834~hmac=dbe96266a3b906deb91e91abe19eee18d9e8d6591e25bdbc7ba8264198d6df4b"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ExtendedImageGesturePageView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ExtendedImage.network(
              images[index],
              fit: BoxFit.contain,
              mode: ExtendedImageMode.gesture,
              initGestureConfigHandler: (ExtendedImageState state) {
                return GestureConfig(
                  minScale: 0.9,
                  animationMinScale: 0.7,
                  maxScale: 4.0,
                  animationMaxScale: 4.5,
                  speed: 1.0,
                  inertialSpeed: 100.0,
                  initialScale: 1.0,
                  inPageView: true,
                  initialAlignment: InitialAlignment.center,
                  reverseMousePointerScrollDirection: true,
                  gestureDetailsIsChanged: (GestureDetails? details) {},
                );
              },
            );
          },
          itemCount: images.length,
          onPageChanged: (int index) {},
          scrollDirection: Axis.horizontal,
        ),
      ),
    );
  }
}

Output：-

Answer 2

我最終找到了本教程，並使用帶有 PhotoViewGalleryPageOption 的 PhotoViewGallery 達到了目的。

它甚至更好，因為頁面邊框被更好地定義，並且不要在您到達邊框時就開始滾動到下一個頁面。

https://resocoder.com/2019/05/04/flutter-photo-view-gallery-resize-rotate-image-carousel/

這是我給有同樣問題的人的完整代碼：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

import '../../../model/file.dart';
import '../../../services/service_file.dart';

class ReaderGallery extends StatelessWidget {
  final File file;
  final Function? onTap;
  final Axis axis;

  const ReaderGallery({
    super.key,
    required this.file,
    required this.axis,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    PageController controller = PageController(initialPage: file.currentPage, keepPage: false);
    return PhotoViewGallery.builder(
      itemCount: file.pagesCount,
      builder: (context, index) {
        return PhotoViewGalleryPageOptions(
          imageProvider: CachedNetworkImageProvider(file.pagesUrl[index]),
          minScale: PhotoViewComputedScale.contained * 1,
          maxScale: PhotoViewComputedScale.contained * 4,
          onTapDown: (context, details, controllerValue) {
            // Set parent state and execute whatever the parent needs to do
            onTap != null ? onTap!() : null;
          },
        );
      },
      scrollDirection: axis,
      pageController: controller,
      onPageChanged: onPageChange,
      scrollPhysics: const BouncingScrollPhysics(),
      backgroundDecoration: BoxDecoration(
        color: Theme.of(context).canvasColor,
      ),
    );
  }

  void onPageChange(int index) {
    file.currentPage = index;
    prefetchNextImage(index);
    ServiceFile.setCurrentPage(file, index);
  }

  void prefetchNextImage(int index){
    if (index < file.pagesCount - 1) {
      DefaultCacheManager().downloadFile(file.pagesUrl[index+1]);
    }
  }
}