原文链接：Flutter Packages Weekly #11: photo_view - 原文作者 Woogi he

本文采用意译的方式

在 Flutter 应用中提升我们查看图像的体验。

欢迎来到一个让人兴奋的 Flutter Packages 的内容。在本文中，我们将沉浸于 photo_view 插件中，这是一个很强大的工具，彻底改变我们在 Flutter 应用中展示图像的方式。如果你正在寻找能够为用户提供沉浸式和可操作图像视觉体验，那么 photo_view 是很好的解决方案。下面我们深入了解为什么这个包是必备的，并且怎么提升我们应用程序的视觉叙事能力。

为什么使用 photo_view ?主要特性和怎么使用他们

photo_view 提供了系列的特性来创建引人的图像交互：

PhotoView：主要的挂件，来展示可缩放和可平移的图像PhotoViewController：控制器，用来以编程方式操纵图像的缩放和平移的状态PhotoViewGallery：一个展示可缩放图像的画廊挂件Customizable Widgets：简单自定义展示和不同行为的 UI 元素，比如加载指示器和错误展示挂件Gesture Detection：通过自定义的手势选项来控制如何对图像的用户交互安装指引

在我们的 pubspec.yaml 文件中，添加 photo_view 来开始：

  dependencies:
    photo_view: ^latest

案例：缩放图像

缩放案例动效

相关代码

PhotoView(
  imageProvider: AssetImage('assets/image.jpg'),
  minScale: PhotoViewComputedScale.contained * 0.8,
  maxScale: PhotoViewComputedScale.covered * 1.8,
  initialScale: PhotoViewComputedScale.contained,
  heroAttributes: PhotoViewHeroAttributes(tag: 'image_hero_tag'),
);

案例：图像库

图像库案例动效

相关代码

PhotoViewGallery.builder(
  scrollPhysics: const BouncingScrollPhysics(),
  builder: (BuildContext context, int index) {
    return PhotoViewGalleryPageOptions(
      imageProvider: NetworkImage(galleryItems[index].image),
      initialScale: PhotoViewComputedScale.contained,
      heroAttributes: PhotoViewHeroAttributes(tag: galleryItems[index].id),
    );
  },
  itemCount: galleryItems.length,
  loadingBuilder: (context, event) => Center(
    child: Container(
      width: 20.0,
      height: 20.0,
      child: CircularProgressIndicator(),
    ),
  ),
);