容器内的颤振缩放图像答案

【问题标题】：Flutter Zoom image inside container容器内的颤振缩放图像
【发布时间】：2021-12-16 04:10:09
【问题描述】：

我可以使用交互式查看器来缩放容器内的图像。但是，似乎图像的比例在变化，而不是图像在容器内被放大。

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

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,
              ),
            ),
        ),
      ),

【问题讨论】：

你为什么不试试photo_view插件，这会让你的任务更轻松。
我使用了photo_view，但它是一样的。我已经在容器上使用边框实现了borders。随着图像大小的增加，图像会在边界之外增长。我希望它在border 内zoom。

标签： flutter dart gesture

【解决方案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,
            ),
          )

【讨论】：

我使用了photo_view，但它是一样的。我在容器上使用borders 实现了边框。随着图像大小的增加，图像会在边界之外增长。我希望它在border 内zoom。