Flutter多图选择插件multi_image_picker_view的使用

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

Flutter多图选择插件multi_image_picker_view的使用

插件简介

Multi Image Picker View 是一个用于Flutter应用程序的插件，它提供了一个完整的组件来轻松地从设备中选择多张图片并在UI中显示。用户可以通过拖拽的方式重新排列已选中的图片，也可以方便地移除图片。此外，还可以限制最多可选择的图片数量，并且整个界面是完全可自定义的。

特性

  • 支持多图选择
  • 图片以GridView形式展示
  • 通过拖拽方式重新排序图片
  • 可以删除选定的图片
  • 设置最大图片数量限制
  • UI高度可定制化

在线演示

你可以访问 LIVE DEMO 查看该插件的实际效果。

开始使用

安装依赖

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  multi_image_picker_view: ^latest_version # 替换为最新版本号
  image_picker: ^1.0.4

然后运行命令安装这些包：

flutter pub get

或者根据需要选择其他文件选择器库如 file_picker。

初始化控制器

创建一个 MultiImagePickerController 实例，并为其指定图片选择逻辑：

final controller = MultiImagePickerController(
    maxImages: 15, // 最大可以选择的图片数
    picker: (bool allowMultiple) async {
      // 使用 image_picker 或者 file_picker 来实现具体的图片选择功能
      final pickedImages = await pickImages(allowMultiple);
      return pickedImages.map((e) => convertToImageFile(e)).toList();
    },
);

界面实现

将 MultiImagePickerView 添加到你的页面布局中：

MultiImagePickerView(
  controller: controller,
  padding: const EdgeInsets.all(10),
);

对于更复杂的场景，你还可以自定义各个部分的外观和行为：

MultiImagePickerView(
  controller: controller,
  builder: (context, imageFile) {
    return DefaultDraggableItemWidget(
      imageFile: imageFile,
      boxDecoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
      closeButtonAlignment: Alignment.topLeft,
      fit: BoxFit.cover,
      closeButtonIcon: const Icon(Icons.delete_rounded, color: Colors.red),
      showCloseButton: true,
      closeButtonMargin: const EdgeInsets.all(3),
      closeButtonPadding: const EdgeInsets.all(3),
    );
  },
  initialWidget: DefaultInitialWidget(
    centerWidget: Icon(Icons.image_search_outlined),
    backgroundColor: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
    margin: EdgeInsets.zero,
  ),
  addMoreButton: DefaultAddMoreWidget(
    icon: Icon(Icons.image_search_outlined),
    backgroundColor: Theme.of(context).colorScheme.primaryColor.withOpacity(0.2),
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  draggable: true,
  shrinkWrap: false,
  longPressDelayMilliseconds: 500,
  onDragBoxDecoration: BoxDecoration(color: Colors.grey.shade200),
  padding: const EdgeInsets.all(8),
);

获取已选图片

当需要获取用户已经选择的所有图片时，可以直接调用控制器的方法：

final images = controller.images; // 返回 Iterable<ImageFile>
for (final image in images) {
  if (image.hasPath)
    request.addFile(File(image.path!));
  else 
    request.addFile(File.fromRawPath(image.bytes!));
}
request.send();

同时，控制器还提供了其他一些操作方法，例如：

  • controller.pickImages() - 触发图片选择
  • controller.hasNoImages - 检查是否没有任何图片被选中
  • controller.maxImages - 获取最大允许选择的图片数
  • controller.removeImage(imageFile) - 移除某一张图片
  • controller.clearImages() - 清空所有已选图片
  • controller.reOrderImage(oldIndex, newIndex) - 调整图片顺序

自定义示例

查看官方仓库中的完整示例项目，了解如何进一步自定义此插件的功能与样式。

迁移指南

如果你是从低于 1.0.0 的版本迁移到 1.0.0 或更高版本，请参考文档中的迁移说明部分进行必要的代码调整。

希望这份指南能帮助你快速上手并充分利用 multi_image_picker_view 插件的强大功能！如果有任何问题或建议，欢迎随时反馈给开发者社区。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用multi_image_picker_view插件来选择多张图片的示例代码。这个插件允许用户从相册或相机中选择多张图片，并显示在一个视图中。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加multi_image_picker_view依赖：

dependencies:
  flutter:
    sdk: flutter
  multi_image_picker_view: ^x.y.z  # 请替换为最新版本号

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

2. 导入插件

在你的Dart文件中导入插件：

import 'package:multi_image_picker_view/multi_image_picker_view.dart';

3. 使用插件

下面是一个完整的示例，展示如何使用multi_image_picker_view来选择多张图片并显示它们：

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

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

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

class MultiImagePickerScreen extends StatefulWidget {
  @override
  _MultiImagePickerScreenState createState() => _MultiImagePickerScreenState();
}

class _MultiImagePickerScreenState extends State<MultiImagePickerScreen> {
  List<Asset> images = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Image Picker Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0,
              ),
              itemCount: images.length,
              itemBuilder: (BuildContext context, int index) {
                Asset asset = images[index];

                // 如果是视频
                if (asset.type == AssetType.video) {
                  return AspectRatio(
                    aspectRatio: asset.aspectRatio,
                    child: VideoPlayerWidget(asset),
                  );
                }

                // 如果是图片
                return Image.file(
                  File(asset.path),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
          SizedBox(height: 16.0),
          ElevatedButton(
            onPressed: () async {
              List<Asset> resultList = await MultiImagePicker.pickImages(
                maxImages: 30,
                enableCamera: true,
                selectedAssets: images,
                cupertinoOptions: CupertinoPickerOptions(
                  gridCount: 3,
                ),
              );

              // 更新状态
              setState(() {
                images = resultList;
              });
            },
            child: Text('Pick Images'),
          ),
        ],
      ),
    );
  }
}

4. 运行应用

确保你的Flutter环境已经正确配置，然后运行应用：

flutter run

这个示例展示了如何使用multi_image_picker_view插件来选择多张图片，并在一个GridView中显示它们。你可以根据需要进一步自定义和扩展这个示例。

回到顶部