容器内的 Flutter Zoom 图像

Question

我可以使用交互式查看器缩放容器内的图像。不过好像是图片的比例在变化，并不是图片在容器里面放大了。

你知道如何在不超出容器区域的情况下缩放图像吗？

Container(
        width: this.size!.width,
        height: this.size!.height,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black, width: 2.0),
        ),
        child: InteractiveViewer(
          clipBehavior: Clip.none,
          panEnabled: true,
          minScale: 1.0,
          maxScale: 3.0,
          onInteractionStart: (details) {
            if (details.pointerCount < 2) return;
          },
          onInteractionUpdate: (details) {
            details.focalPoint;
          },
          child: GestureDetector(
            onHorizontalDragEnd: (DragEndDetails details) {
              if (details.primaryVelocity! > 0) {
                context
                    .read<ServerCommunicationProvider>()
                    .decrementPageIndex();
              } else if (details.primaryVelocity! < 0) {
                context
                    .read<ServerCommunicationProvider>()
                    .incrementPageIndex();
              }
            },
            child: Image(
              image: AssetImage(
                  context.watch<ServerCommunicationProvider>().imagePath[
                      context.watch<ServerCommunicationProvider>().nPageIndex]),
            ),
          ),
        ),
      ),

我使用 'photo_view' 解决了这个问题。我在下面附上了解决问题的来源。


      child: Container(
        width: this.size!.width,
        height: this.size!.height,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black, width: 2.0),
        ),
        child: GestureDetector(
            onHorizontalDragEnd: (DragEndDetails details) {
              if (details.primaryVelocity! > 0) {
                context.read<ServerCommunicationProvider>()
                    .decrementPageIndex();
              } else if (details.primaryVelocity! < 0) {
                context.read<ServerCommunicationProvider>()
                    .incrementPageIndex();
              }
            },
            child: ClipRect(
              child: PhotoView(
                imageProvider: AssetImage('${context
                    .watch<ServerCommunicationProvider>()
                    .imagePath[
                context
                    .watch<ServerCommunicationProvider>()
                    .nPageIndex
                ]}'),
                maxScale: PhotoViewComputedScale.contained * 2.0,
                minScale: PhotoViewComputedScale.contained,
                initialScale: PhotoViewComputedScale.contained,
              ),
            ),
        ),
      ),

Answer 1

您可以使用photo_view

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

如果您使用 photoViewGallery 它将包含图像到 container。

首次导入

import 'package:photo_view/photo_view_gallery.dart';

PhotoViewGallery 的使用

        AspectRatio(
            aspectRatio: 1,
            child: PhotoViewGallery.builder(
              backgroundDecoration: BoxDecoration(color: Colors.white),
              scrollPhysics: BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  maxScale: PhotoViewComputedScale.contained,
                  minScale: PhotoViewComputedScale.contained,
                  imageProvider: AssetImage(
                      "assets/images/backgrounds/courses_congrats.png"),
                  initialScale: PhotoViewComputedScale.contained,
                );
              },
              itemCount: 1,
            ),
          )

容器内的 Flutter Zoom 图像

Flutter Zoom image inside container

gesture

dart

flutter