清泛IT社区

标题: App Inventor 2 MultiImagePicker 拓展：实现图片/视频多选功能 [打印本页]

作者: App Inventor 2 时间: 2 小时前
标题: App Inventor 2 MultiImagePicker 拓展：实现图片/视频多选功能
App Inventor 2 MultiImagePicker 拓展：实现图片/视频多选功能

App Inventor 2 原生提供的 ImagePicker（图像选择器）组件只能一次选择一张图片，在实际开发中经常需要一次选取多张图片（比如发帖、上传相册等场景）。MultiImagePicker 拓展完美解决这个问题。

一、拓展简介

MultiImagePicker 是 App Inventor 2 中文网提供的图片单选/多选扩展组件，主要功能：
- 支持单选和多选图片
- 支持选择视频文件
- 长按图片即可一次选择多张
- 可设置最大选择数量
- 可过滤文件类型

官方文档：https://www.fun123.cn/reference/extensions/MultiImagePicker.html

(, 下载次数: 3)

二、属性

MimeFilter（图片过滤类型）
- 默认值：image/*
- 单选和多选都会使用这个过滤条件
- 如果想选择视频，可以改为 video/* 或 */*

三、事件

AfterMultiplePick(paths) - 多选完成后触发，返回复制到本地后的图片路径列表
AfterSinglePick(path) - 单选完成后触发，返回复制到本地后的图片路径
ErrorOccurred(operation, message) - 当选择器打开失败或图片保存失败时触发
PickerCancelled(operation) - 当用户取消图片选择器时触发

四、方法

MultiplePick(maxCount) - 打开系统选择器多选图片。maxCount 小于等于 0 表示不额外限制数量
SinglePick() - 打开系统选择器单选图片

五、使用教程

第一步：导入拓展
1. 从 fun123.cn 下载 MultiImagePicker.aix 拓展文件
2. 在 App Inventor 2 设计视图中，点击左下角 Extension 导入拓展

第二步：设计界面
添加一个按钮和 MultiImagePicker 组件，再加一个 Label 用来显示选中的图片路径。

(, 下载次数: 3)

第三步：编写逻辑

多选示例（选择最多5张图片）：

当 Button1.被点击：
- 调用 MultiImagePicker1.MultiplePick(5)

当 MultiImagePicker1.完成多选(paths)：
- 设置 Label1.显示文本为 "已选择" + 获取列表长度(paths) + "张图片"

单选示例：

当 Button2.被点击：
- 调用 MultiImagePicker1.SinglePick()

当 MultiImagePicker1.完成单选(path)：
- 设置 Label1.显示文本为 path

(, 下载次数: 3)

六、常见应用场景

1. 社交类 App：选择多张照片发动态
2. 电商类 App：选择商品图片上传
3. 教育类 App：选择作业图片提交
4. 工具类 App：批量选择文件处理

七、注意事项

- 路径返回的是复制到本地的路径，不是原始路径
- maxCount 参数控制的是额外可选数量，0 或负数表示不限制
- 取消选择会触发 PickerCancelled 事件，建议做处理避免 App 卡住
- 如果选择失败会触发 ErrorOccurred 事件，建议加错误处理逻辑

拓展下载
MultiImagePicker 拓展下载页面

更多 App Inventor 2 拓展和教程，访问 App Inventor 2 中文网：https://www.fun123.cn

欢迎光临清泛IT社区 (https://bbs.tsingfun.com/)