Flutter图片选择器插件photo_selector的使用

Flutter图片选择器插件photo_selector的使用

一个Flutter轻量级的照片选择器,支持iOS和Android.

功能介绍

  • 类似微信朋友圈九宫格照片预览器
  • 可编辑的照片选择器
  • 可设置水平间距、垂直间距
  • 可设置列数
  • 可设置是否可滚动
  • 可设置是否可编辑
  • 可设置最大数量

添加依赖

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

dependencies:
  photo_selector: ^0.0.1

照片控制器

/// 照片选择器
class PhotoSelector extends StatefulWidget {
  /// 照片数据集合
  List<PhotoData> _photoDatas = [];

  /// 照片选择器布局
  final PhotoSelectorLayout _photoSelectorLayout = PhotoSelectorLayout();

  /// 照片选择器回调处理
  final PhotoSelectorHandler _photoSelectorHandler = PhotoSelectorHandler();

  /// 创建状态
  [@override](/user/override)
  State<StatefulWidget> createState() => _PhotoSelectorState();

  /// 构造照片选择器
  PhotoSelector({
    required List<PhotoData> photoDatas,
    void Function(PhotoSelectorLayout photoSelectorLayout)? photoSelectorLayout,
    void Function(PhotoSelectorHandler photoSelectorHandler)? photoSelectorHandler,
  }) {
    _photoDatas = photoDatas;
    photoSelectorLayout?.call(_photoSelectorLayout);
    photoSelectorHandler?.call(_photoSelectorHandler);
  }
}

布局类

/// 照片选择器布局
class PhotoSelectorLayout extends Object {
  /// 列数
  int column;

  /// 最大数量
  int? maxCount;

  /// 垂直间距
  double verticalSpacing;

  /// 水平间距
  double horizontalSpacing;

  /// 编辑
  bool edit;

  /// 滚动
  bool scroll;

  /// 构建照片选择器布局
  PhotoSelectorLayout({
    this.column = 3,
    this.horizontalSpacing = 5.0,
    this.verticalSpacing = 5.0,
    this.edit = true,
    this.scroll = true,
  });
}

处理类

/// 照片选择器处理
class PhotoSelectorHandler extends Object {
  /// 预览回调
  void Function(PhotoData photoData, List<PhotoData> photoDatas)? onPreview;

  /// 删除回调
  void Function(PhotoData photoData, List<PhotoData> photoDatas)? onDelete;

  /// 添加回调
  void Function(void Function(List<PhotoData> photoDatas))? onAdd;

  /// 照片选择器回调处理
  PhotoSelectorHandler({this.onAdd, this.onPreview, this.onDelete});
}

示例

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:photo_selector/photo_selector.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  List<PhotoData> photos = [
    PhotoData(
      allowEdit: false,
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637479550&t=8c5f21b7a3e516e74eba3b72fb63ecce",
    ),
    PhotoData(
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage66.360doc.com%2FDownloadImg%2F2013%2F11%2F0708%2F36512556_53.jpg&refer=http%3A%2F%2Fimage66.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637563329&t=cd4c36d777fa2d5cc3c60ce866a22a9a",
    ),
    PhotoData(
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.nipic.com%2F2009-02-26%2F2009226195511805_2.jpg&refer=http%3A%2F%2Fpic1.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637563329&t=f21cc4dc3226c429adf45909367080fb",
    ),
    PhotoData(
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic14.nipic.com%2F20110512%2F6202394_223408457128_2.jpg&refer=http%3A%2F%2Fpic14.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637563329&t=91c41dd3c8338e63a489624fa35b7e3e",
    ),
    PhotoData(
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F140628%2F3-14062Q52P5.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637563329&t=0f16a592da1207bb234640b533c83e84",
    ),
    PhotoData(
      imageData: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121031%2F369125_100510566000_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637563329&t=7ed4c46b4b734829db15299d351b613b",
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('照片选择器'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        width: double.infinity,
        child: PhotoSelector(
          photoDatas: photos,
          photoSelectorLayout: (layout) {
            layout.edit = false;
            layout.maxCount = 9;
            layout.scroll = true;
            layout.horizontalSpacing = 5.0;
            layout.verticalSpacing = 5.0;
            layout.column = 3;
          },
          photoSelectorHandler: (handler) {
            handler.onAdd = (add) {
              ImagePicker().pickMultiImage().then((value) {
                List<PhotoData> photoDatas = [];
                value?.forEach((element) {
                  PhotoData photoData = PhotoData(
                    imageData: File(element.path),
                  );
                  photoDatas.add(photoData);
                });
                add(photoDatas);
                print("添加后的照片数量：${photos.length}");
              });
            };
            handler.onDelete = (data, datas) {
              print("删除的照片数据：${data.imageData}");
              print("删除后的照片数量：${datas.length}");
            };
            handler.onPreview = (data, datas) {
              print("当前预览的照片数据：${data.imageData}");
              print("当前预览的照片索引：${datas.indexOf(data)}");
              print("预览的照片数量：${datas.length}");
            };
          },
        ),
      ),
    );
  }
}

更多关于Flutter图片选择器插件photo_selector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


photo_selector 是一个用于 Flutter 的图片选择器插件，它允许用户从相册中选择图片或拍摄新照片。以下是如何使用 photo_selector 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 photo_selector 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  photo_selector: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在需要使用 photo_selector 的 Dart 文件中导入插件：

import 'package:photo_selector/photo_selector.dart';

3. 请求权限

在 Android 和 iOS 上，访问相册和相机需要相应的权限。你可以使用 permission_handler 插件来请求这些权限。

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  var status = await Permission.photos.status;
  if (!status.isGranted) {
    await Permission.photos.request();
  }

  status = await Permission.camera.status;
  if (!status.isGranted) {
    await Permission.camera.request();
  }
}

4. 使用 photo_selector 选择图片

你可以使用 PhotoSelector.pickPhoto 方法来选择图片。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:photo_selector/photo_selector.dart';
import 'package:permission_handler/permission_handler.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _imagePath;

  Future<void> _pickImage() async {
    await requestPermissions();

    final String? imagePath = await PhotoSelector.pickPhoto(
      context: context,
      maxWidth: 800,
      maxHeight: 800,
      quality: 80,
    );

    if (imagePath != null) {
      setState(() {
        _imagePath = imagePath;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Selector Example'),
      ),
      body: Center(
        child: _imagePath == null
            ? Text('No image selected.')
            : Image.file(File(_imagePath!)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

5. 处理选择的图片

在上面的示例中，_imagePath 保存了用户选择的图片的路径。你可以使用 Image.file 来显示图片。

6. 其他功能

photo_selector 还支持其他功能，例如：

  • 拍照：你可以使用 PhotoSelector.takePhoto 方法来打开相机并拍照。
  • 多选：如果你需要用户选择多张图片，可以使用 PhotoSelector.pickPhotos 方法。
Future<void> _pickMultipleImages() async {
  await requestPermissions();

  final List<String>? imagePaths = await PhotoSelector.pickPhotos(
    context: context,
    maxWidth: 800,
    maxHeight: 800,
    quality: 80,
  );

  if (imagePaths != null) {
    setState(() {
      // 处理多张图片
    });
  }
}
回到顶部