在Flutter中使用PhotoViewGallery指南_flutter photoviewgallery

介绍

Flutter中的PhotoViewGallery是一个功能强大的插件，用于在应用中展示可缩放的图片。无论是构建图像浏览器、相册应用，还是需要在应用中查看大图的场景，PhotoViewGallery都是一个不错的选择。

添加依赖

首先，需要在pubspec.yaml文件中添加photo_view插件的依赖。打开该文件，然后在dependencies部分添加：

dependencies:
  #https://pub.dev/packages/photo_view
  photo_view: ^0.13.0
1
2
3

保存文件后，在终端运行flutter packages get以获取依赖。

导入库

在你的Dart文件中导入photo_view库：

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

创建数据源

准备一个包含图片信息的数据源。一个包含图片链接的列表，例如：

List<String> imageUrls = [
      "https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://ts3.cn.mm.bing.net/th?id=OIP-C.bVb769JBdzVZYuksxZ2Y-AHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2",
      "https://ts3.cn.mm.bing.net/th?id=OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2",
    ];
1
2
3
4
5

创建PhotoViewGallery

使用PhotoViewGallery封装数据源，指定一些配置选项：

class MyGallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PhotoViewGallery.builder(
        itemCount: imageList.length,
        builder: (context, index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: NetworkImage(imageList[index]),
            minScale: PhotoViewComputedScale.contained * 0.8,
            maxScale: PhotoViewComputedScale.covered * 2,
          );
        },
        scrollPhysics: BouncingScrollPhysics(),
        backgroundDecoration: BoxDecoration(
          color: Colors.black,
        ),
        pageController: PageController(),
        onPageChanged: (index) {
          // 处理页面切换
        },
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

PhotoViewGallery属性介绍

在PhotoViewGallery中，可以设置许多属性来自定义其行为和外观。以下是一些常见的属性：

• itemCount: 数据源的长度，即图片数量。
• builder: 构建每一页的回调函数，返回一个PhotoViewGalleryPageOptions对象。
• scrollPhysics: 滑动的物理效果。
• backgroundDecoration: 背景的装饰，可以设置颜色、图片等。
• pageController: 控制页码的控制器。
• onPageChanged: 页码改变时的回调函数。
• loadingBuilder：用于自定义加载时的小部件。

PhotoViewGalleryPageOptions介绍

PhotoViewGalleryPageOptions是photo_view库中的一个类，用于配置PhotoViewGallery中每一页的属性。通过使用这个类，你可以对每张图片进行个性化的设置，包括图片提供者、最小缩放比例、最大缩放比例等。

主要属性：

• imageProvider: 这是一个必需的属性，用于指定图片的提供者。它可以是各种图片提供者，如NetworkImage、AssetImage等。你需要将具体的图片提供者实例传递给这个属性。

imageProvider: NetworkImage("https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=600"),
1

• minScale: 用于设置图片的最小缩放比例。默认值是PhotoViewComputedScale.contained * 0.8。你可以根据需要调整这个值，以确保在查看图片时可以缩小到合适的尺寸。

minScale: PhotoViewComputedScale.contained * 0.5,
1

• maxScale: 用于设置图片的最大缩放比例。默认值是PhotoViewComputedScale.covered * 2。这决定了可以将图片放大到的最大尺寸。

maxScale: PhotoViewComputedScale.covered * 3,
1

• heroTag: 一个可选的属性，用于在页面切换时支持共享元素转换（Hero Animation）。通过为不同页面的PhotoViewGallery设置相同的heroTag，你可以创建一个平滑的过渡效果。

heroTag: "heroTagForImage1",
1

• backgroundDecoration: 用于设置每一页的背景装饰，可以是颜色、渐变色、图片等。默认为透明。

backgroundDecoration: BoxDecoration(
  color: Colors.black,
),
1
2
3

• basePosition: 一个PhotoViewPosition对象，用于设置页面初始位置。这允许你在初始加载时将页面定位到指定的位置。

basePosition: PhotoViewPosition(1.0, Offset(0.5, 0.5)),
1

• onTapUp: 一个回调函数，当用户在图片上执行轻击时触发。你可以在这里处理点击事件，例如关闭图片浏览器。

onTapUp: (context, details, controllerValue) {
  Navigator.pop(context);
},
1
2
3

更多信息可参考：
Flutter可缩放图像组件photo_view
预览大图并支持保存相册