Flutter图片浏览插件photos_browser的使用

PhotoBrowser 是一个支持缩略图的可缩放图片和自定义视图浏览插件。它还提供了可以从网络下载到本地相册的图片数据。

示例

使用步骤

添加依赖

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

dependencies:
  photos_browser: 4.0.0

导入库

在 Dart 文件中导入 photos_browser 库：

import 'package:photos_browser/photo_browser.dart';

创建和展示 PhotoBrowser 实例

以下是一个创建和展示 PhotoBrowser 的示例：

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，则 allowTapToPop 设置无效。
        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(),
      );

      // 可以直接 push。
      // photoBrowser.push(context);
      photoBrowser
          .push(context, page: HCHud(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,
          ),
        ),
      ],
    ),
  );
}

使用 PhotoBrowserController

通过控制器 pop 退出

onTap: () {
  // 通过控制器 pop 退出，效果和单击退出效果一样。
  _browserController.pop();
},

通过控制器获取图片数据并保存到相册

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();
    var result = await ImageGallerySaver.saveImage(Uint8List.fromList(uint8list));
  }
},

通过控制器刷新 PhotoBrowser

onTap: () {
  // 通过控制器刷新 PhotoBrowser。
  _browserController.setState(() {});
},