Flutter图片浏览插件photo_browser的使用

photo_browser 是一个支持缩略图和自定义视图浏览的可缩放图片浏览插件，允许用户将图片下载到本地相册。以下是该插件的基本使用方法和示例代码。

插件信息

• pub.dev
• GitHub Stars

示例演示

使用步骤

依赖插件

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  photo_browser: 3.0.3

然后运行 flutter pub get 来安装插件。

导入插件

在 Dart 文件中导入插件：

import 'package:photo_browser/photo_browser.dart';

创建和显示 PhotoBrowser 实例

以下是一个完整的示例，展示如何创建和显示 PhotoBrowser 实例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> _bigPhotos = [
    "https://example.com/big1.jpg",
    "https://example.com/big2.jpg",
    "https://example.com/big3.jpg",
  ];

  final List<String> _thumbPhotos = [
    "https://example.com/thumb1.jpg",
    "https://example.com/thumb2.jpg",
    "https://example.com/thumb3.jpg",
  ];

  final List<String> _heroTags = ["tag1", "tag2", "tag3"];

  final PhotoBrowserController _browserController = PhotoBrowserController();

  Widget _buildImage(int index) {
    return Image.network(_thumbPhotos[index]);
  }

  Widget _failedChild() {
    return Center(child: Text('Failed to load image'));
  }

  Widget _buildCloseBtn(BuildContext context) {
    return Positioned(
      top: 40,
      right: 20,
      child: GestureDetector(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Icon(Icons.close, color: Colors.white, size: 30),
      ),
    );
  }

  Widget _buildSaveImageBtn(BuildContext context, int index) {
    return Positioned(
      bottom: 20,
      right: 20,
      child: GestureDetector(
        onTap: () async {
          ImageInfo? imageInfo;
          if (_browserController.imageInfo[index] != null) {
            imageInfo = _browserController.imageInfo[index];
          } else if (_browserController.thumbImageInfo[index] != null) {
            imageInfo = _browserController.thumbImageInfo[index];
          }
          if (imageInfo == null) {
            return;
          }

          var byteData =
              await imageInfo.image.toByteData(format: ImageByteFormat.png);
          if (byteData != null) {
            Uint8List uint8list = byteData.buffer.asUint8List();
            // Save image to album
            // var result = await ImageGallerySaver.saveImage(uint8list);
          }
        },
        child: Icon(Icons.download, color: Colors.white, size: 30),
      ),
    );
  }

  Widget _buildGuide(BuildContext context, int index) {
    return Positioned(
      bottom: 60,
      left: 20,
      child: Text(
        '${index + 1}/${_bigPhotos.length}',
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
    );
  }

  Widget _buildCell(BuildContext context, int cellIndex) {
    return GestureDetector(
      onTap: () {
        PhotoBrowser photoBrowser = PhotoBrowser(
          itemCount: _bigPhotos.length,
          initIndex: cellIndex,
          controller: _browserController,
          allowTapToPop: true,
          allowSwipeDownToPop: true,
          allowPullDownToPop: true,
          heroTagBuilder: (int index) {
            return _heroTags[index];
          },
          imageUrlBuilder: (int index) {
            return _bigPhotos[index];
          },
          thumbImageUrlBuilder: (int index) {
            return _thumbPhotos[index];
          },
          positions: (BuildContext context) => <Positioned>[_buildCloseBtn(context)],
          positionBuilders: <PositionBuilder>[
            _buildSaveImageBtn,
            _buildGuide,
          ],
          loadFailedChild: _failedChild(),
        );

        photoBrowser
            .push(context, page: Container(child: photoBrowser))
            .then((value) {
          print('PhotoBrowser closed');
        });
      },
      child: Stack(
        children: [
          Positioned.fill(
              child: Container(color: Colors.grey.withOpacity(0.6))),
          Positioned.fill(
            child: Hero(
                tag: _heroTags[cellIndex],
                child: _buildImage(cellIndex),
                placeholderBuilder: (BuildContext context, Size heroSize, Widget child) =>
                    child),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Browser Example'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemCount: _bigPhotos.length,
        itemBuilder: (context, index) {
          return _buildCell(context, index);
        },
      ),
    );
  }
}

使用 PhotoBrowserController

PhotoBrowserController 提供了多种控制 PhotoBrowser 的方法，例如：

// Pop through controller
onTap: () {
  _browserController.pop();
},

// Obtain image data through the controller
onTap: () async {
  ImageInfo? imageInfo;
  if (_browserController.imageInfo[curIndex] != null) {
    imageInfo = _browserController.imageInfo[curIndex];
  } else if (_browserController.thumbImageInfo[curIndex] != null) {
    imageInfo = _browserController.thumbImageInfo[curIndex];
  }
  if (imageInfo == null) {
    return;
  }

  var byteData =
    await imageInfo.image.toByteData(format: ImageByteFormat.png);
  if (byteData != null) {
    Uint8List uint8list = byteData.buffer.asUint8List();
    // Save image to album
    // var result = await ImageGallerySaver.saveImage(uint8list);
  }
},

// Refresh the photoBrowser through the controller
onTap: () {
  _browserController.setState(() {});
},

以上是 photo_browser 插件的基本使用方法和示例代码。通过这些示例，您可以快速集成并使用该插件来实现图片浏览功能。