photo_view

一个用于Flutter的简单可缩放的图像/内容组件。

PhotoView 使图像变得可根据用户手势（如捏合、旋转和拖拽）进行缩放和平移。

它还可以显示任意组件而不是图像，例如 Container 、 Text 或 SVG 。

尽管使用起来超级简单，但 PhotoView 通过其选项和控制器使其具有极强的可定制性。

安装

在 pubspec.yaml 文件中添加 photo_view 依赖项：

dependencies:
  photo_view: ^0.13.0

导入 Photo View：

import 'package:photo_view/photo_view.dart';

文档和API

API 文档有关于如何使用 PhotoView 的详细信息。

如果你想在实践中看到它，可以通过查看示例应用或在发布页面上下载最新版的 APK 来浏览 Photo View 的大多数的使用场景。

（非常）基本的用法

设置一个 ImageProvider imageProvider (例如： AssetImage 或 NetworkImage)：

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

结果：

In action

关于 PhotoView 的更多信息可以查看这里。

Gallery(画廊)

要显示一系列图像并让用户在它们之间进行切换，请使用 PhotoViewGallery 。

有关 gallery 的更多信息可以查看这里。

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
// ...


@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoViewGallery.builder(
      scrollPhysics: const BouncingScrollPhysics(),
      builder: (BuildContext context, int index) {
        return PhotoViewGalleryPageOptions(
          imageProvider: AssetImage(widget.galleryItems[index].image),
          initialScale: PhotoViewComputedScale.contained * 0.8,
          heroAttributes: PhotoViewHeroAttributes(tag: galleryItems[index].id),
        );
      },
      itemCount: galleryItems.length,
      loadingBuilder: (context, event) => Center(
        child: Container(
          width: 20.0,
          height: 20.0,
          child: CircularProgressIndicator(
            value: event == null
                ? 0
                : event.cumulativeBytesLoaded / event.expectedTotalBytes,
          ),
        ),
      ),
      backgroundDecoration: widget.backgroundDecoration,
      pageController: widget.pageController,
      onPageChanged: onPageChanged,
    )
  );
}