Flutter图片缩放查看插件photo_view_v3的使用

Flutter图片缩放查看插件photo_view_v3的使用

简介

photo_view 是一个用于Flutter的简单可缩放图片/内容组件。它允许用户通过手势（如捏合、旋转和拖动）来缩放和移动图片或任何其他Widget（如Container、Text或SVG）。尽管使用非常简单，但photo_view提供了丰富的自定义选项和控制器，使其功能强大。

安装

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

dependencies:
  photo_view: ^0.14.0

然后导入photo_view库：

import 'package:photo_view/photo_view.dart';

基本用法

以下是一个简单的示例，展示如何使用PhotoView显示一张图片并支持缩放和拖动：

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View Example'),
        ),
        body: Center(
          child: PhotoView(
            imageProvider: AssetImage("assets/large-image.jpg"), // 使用AssetImage加载本地图片
            // 或者使用NetworkImage加载网络图片
            // imageProvider: NetworkImage("https://example.com/image.jpg"),
          ),
        ),
      ),
    );
  }
}

图片画廊

如果你想显示多张图片，并允许用户在它们之间切换，可以使用PhotoViewGallery。以下是一个示例代码，展示了如何创建一个图片画廊：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View Gallery Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View Gallery Example'),
        ),
        body: PhotoViewGallery.builder(
          scrollPhysics: const BouncingScrollPhysics(),
          builder: (BuildContext context, int index) {
            return PhotoViewGalleryPageOptions(
              imageProvider: AssetImage("assets/image${index + 1}.jpg"), // 替换为你的图片路径
              initialScale: PhotoViewComputedScale.contained * 0.8, // 初始缩放比例
              heroAttributes: PhotoViewHeroAttributes(tag: "image$index"), // 用于英雄动画
            );
          },
          itemCount: 5, // 图片数量
          loadingBuilder: (context, event) => Center(
            child: Container(
              width: 20.0,
              height: 20.0,
              child: CircularProgressIndicator(
                value: event == null
                    ? 0
                    : event.cumulativeBytesLoaded / event.expectedTotalBytes,
              ),
            ),
          ),
          backgroundDecoration: BoxDecoration(color: Colors.black), // 背景颜色
        ),
      ),
    );
  }
}

使用控制器

如果你需要与PhotoView的内部状态进行交互，可以使用PhotoViewController和PhotoViewScaleStateController。这些控制器允许你监听状态变化并通过外部代码修改这些值。

以下是一个使用控制器的示例：

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_controller.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View Controller Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View Controller Example'),
        ),
        body: PhotoViewControllerExample(),
      ),
    );
  }
}

class PhotoViewControllerExample extends StatefulWidget {
  [@override](/user/override)
  _PhotoViewControllerExampleState createState() => _PhotoViewControllerExampleState();
}

class _PhotoViewControllerExampleState extends State<PhotoViewControllerExample> {
  final PhotoViewController controller = PhotoViewController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: PhotoView(
            imageProvider: AssetImage("assets/large-image.jpg"),
            controller: controller,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                controller.scale(2.0); // 缩放图片
              },
              child: Text('放大'),
            ),
            ElevatedButton(
              onPressed: () {
                controller.scale(0.5); // 缩小图片
              },
              child: Text('缩小'),
            ),
            ElevatedButton(
              onPressed: () {
                controller.reset(); // 重置缩放和位置
              },
              child: Text('重置'),
            ),
          ],
        ),
      ],
    );
  }
}