Flutter图片浏览插件flutter_photo_view的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter图片浏览插件flutter_photo_view的使用

特性

PhotoView插件旨在帮助实现一个易于使用的可缩放ImageView。

开始使用

首先，你需要在你的项目中添加flutter_photo_view依赖。运行以下命令：

$ flutter pub add flutter_photo_view

这会在你的项目的pubspec.yaml文件中添加一行类似如下的内容（并隐式地执行dart pub get）：

dependencies:
    flutter_photo_view: ^1.0.3

注意：在Android上，将MainActivity扩展为FlutterFragmentActivity。

你也可以通过编辑器支持的dart pub get或flutter pub get来添加依赖。具体可以查阅你的编辑器文档以了解更多信息。

使用方法

你可以使用以下代码来展示图片：

import 'package:photo_view/flutter_photo_view.dart';

PhotoViewController.presentWithUrls(
  photos: ['https://placehold.jp/150x150.png', 'https://placehold.jp/160x160.png'], 
  position: 0
);

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用flutter_photo_view插件：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 100),
              child: TextButton(
                  onPressed: () {
                    // 展示多张图片
                    PhotoViewController.presentWithUrls(photos: [
                      'https://fastly.picsum.photos/id/1/5000/3333.jpg?hmac=Asv2DU3rA_5D1xSe22xZK47WEAN0wjWeFOhzd13ujW4',
                      'https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghY5fCfSD6tvtcV74zXivkJSPIfR9B8w34XeQmvU',
                      'https://fastly.picsum.photos/id/4/5000/3333.jpg?hmac=ghf06FdmgiD0-G4c9DdNM8RnBIN7BO0-ZGEw47khHP4',
                    ], position: 0);
                  },
                  child: Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(5)),
                          border: Border.all(
                              color: Colors.deepPurpleAccent, width: 1)),
                      child: const Text('展示图片链接'))),
            ),
            const Expanded(
                child: PhotoView(
                    imageProvider: NetworkImage(
                        'https://fastly.picsum.photos/id/4/5000/3333.jpg?hmac=ghf06FdmgiD0-G4c9DdNM8RnBIN7BO0-ZGEw47khHP4')))
          ],
        ),
      ),
    );
  }
}

更多关于Flutter图片浏览插件flutter_photo_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片浏览插件flutter_photo_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，flutter_photo_view 是一个强大的 Flutter 插件，用于实现图片浏览功能，支持缩放、拖拽等交互。以下是一个简单的代码示例，展示如何在 Flutter 应用中使用 flutter_photo_view 插件。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_photo_view 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_photo_view: ^0.14.0  # 请注意版本号，使用最新版本

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中，你可以按照以下方式使用 flutter_photo_view：

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
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Photo View Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Photo View Demo'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => FullScreenImagePage(imageUrls[index]),
                ),
              );
            },
            child: Image.network(
              imageUrls[index],
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}

class FullScreenImagePage extends StatelessWidget {
  final String imageUrl;

  FullScreenImagePage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Center(
          child: PhotoViewGallery.builder(
            scrollPhysics: const BouncingScrollPhysics(),
            builder: (BuildContext context, int index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: NetworkImage(imageUrl),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.covered * 3,
              );
            },
            itemCount: 1,
          ),
        ),
      ),
    );
  }
}

解释

  1. 依赖引入：在 pubspec.yaml 文件中添加 flutter_photo_view 依赖。

  2. 主应用：MyApp 类是应用的入口，定义了一个基本的 Material 应用。

  3. 首页：MyHomePage 类展示了一个网格视图，每个网格项显示一张图片，并且点击图片时会跳转到全屏图片浏览页面。

  4. 全屏图片浏览页面：FullScreenImagePage 类使用 PhotoViewGallery.builder 构建一个全屏图片浏览页面，支持缩放和拖拽。这里我们假设只展示一张图片，所以 itemCount 设置为 1。

  5. 图片资源：在示例中，我们使用了网络图片 URL。你可以根据需要替换为本地图片或其他图片源。

这个示例展示了如何使用 flutter_photo_view 实现一个简单的图片网格展示和全屏浏览功能。你可以根据实际需求进一步定制和扩展。

回到顶部