Flutter 系列 - phone_view 包在 Flutter 应用中提升我们查看图像的体验。 欢迎来到一个让人兴

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

本文采用意译的方式

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

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

为什么使用 photo_view ?

• 交互式缩放：允许用户捏合缩放🤏，双击缩放，并且轻松平移高分辨率图像
• 平滑过度：通过平滑的动画在图像预览和全屏视图之间无缝衔接
• 自定义手势：调整手势行为来匹配我们应用的特殊需求
• 主角动画：通过使用主角 Hero 动画创建视图上令人惊叹的过度，以在屏幕上实现动画的无缝衔接
• 图像加载：从过个源头轻松加载图像，包括 assets，网络 URLs 和文件
• 优化性能：photo_view 为性能而设计，确保平滑和自适应的图像查看体验

主要特性和怎么使用他们

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

1. PhotoView：主要的挂件，来展示可缩放和可平移的图像
2. PhotoViewController：控制器，用来以编程方式操纵图像的缩放和平移的状态
3. PhotoViewGallery：一个展示可缩放图像的画廊挂件
4. Customizable Widgets：简单自定义展示和不同行为的 UI 元素，比如加载指示器和错误展示挂件
5. 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(),
    ),
  ),
);

更多案例

如下👇

Demo-01	Demo-02

总结

在 Flutter 开发的世界里面，迷人的视觉效果对于创造让人难以忘怀的用户体验至关重要。photo_view 包能让我们将图像的展示带到另一种层次，提供交互式的缩放，平滑的过度和自定义的手势。无论我们是构建一个图像展览，还是商品展示方案，或者在任何包含图像功能的应用程序中，photo_view 都是一个很有价值的资产，将帮助我们提升我们应用程序的视觉叙事的能力。

插件的地址 photo_view | Flutter package