Flutter应用中使用file_picker多选相册视频后如何在界面展示？

嘿，刚好我对file_picker和Flutter视频展示这块比较熟，给你一步步拆解实现方法，结合你提到的示例代码思路来做：

第一步：先确保依赖到位 #

除了你已经用的file_picker，还需要引入video_player包来处理视频播放和展示。在pubspec.yaml里添加：

dependencies:
  file_picker: ^latest_version
  video_player: ^latest_version

然后执行flutter pub get拉取依赖。

第二步：获取多选视频文件 #

参考你提到的示例代码逻辑，调用FilePicker.platform.pickFiles方法，指定类型为视频并开启多选：

Future<void> pickMultipleVideos() async {
  final result = await FilePicker.platform.pickFiles(
    type: FileType.video,
    allowMultiple: true,
    // 可选：可以设置allowedExtensions过滤特定格式，比如['mp4', 'mov']
  );

  if (result != null) {
    // 拿到选中的视频列表，类型是List<PlatformFile>
    setState(() {
      _selectedVideos = result.files;
      // 紧接着初始化视频控制器，准备展示
      _initVideoControllers();
    });
  }
}

第三步：初始化视频控制器 #

每个视频都需要一个VideoPlayerController来管理播放状态，所以我们要维护一个控制器列表，注意一定要处理资源释放，避免内存泄漏：

List<PlatformFile> _selectedVideos = [];
List<VideoPlayerController> _videoControllers = [];

Future<void> _initVideoControllers() async {
  // 先释放之前的控制器，避免内存占用
  for (final controller in _videoControllers) {
    await controller.dispose();
  }
  _videoControllers.clear();

  // 为每个选中的视频创建控制器并初始化
  for (final video in _selectedVideos) {
    // 用本地文件路径创建控制器
    final controller = VideoPlayerController.file(File(video.path!));
    // 等待控制器初始化完成（获取视频宽高、时长等信息）
    await controller.initialize();
    _videoControllers.add(controller);
    setState(() {}); // 更新UI
  }
}

第四步：用UI组件展示视频列表 #

可以用GridView或者ListView来展示多选的视频，这里用GridView做示例，每个视频项包含视频预览、播放/暂停按钮和文件名：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('多选视频展示')),
    body: _selectedVideos.isEmpty
        ? const Center(child: Text('点击下方按钮选择视频'))
        : GridView.builder(
            padding: const EdgeInsets.all(16),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, // 每行显示2个视频
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
            ),
            itemCount: _selectedVideos.length,
            itemBuilder: (context, index) {
              final controller = _videoControllers[index];
              final videoFile = _selectedVideos[index];

              return Column(
                children: [
                  // 视频预览区域，保持原视频比例
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: controller.value.aspectRatio,
                      child: VideoPlayer(controller),
                    ),
                  ),
                  // 播放/暂停按钮
                  IconButton(
                    icon: Icon(
                      controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                    ),
                    onPressed: () {
                      setState(() {
                        controller.value.isPlaying
                            ? controller.pause()
                            : controller.play();
                      });
                    },
                  ),
                  // 文件名展示
                  Text(
                    videoFile.name,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(fontSize: 12),
                  ),
                ],
              );
            },
          ),
    floatingActionButton: FloatingActionButton(
      onPressed: pickMultipleVideos,
      child: const Icon(Icons.video_library),
    ),
  );
}

第五步：资源清理（关键！） #

在Widget销毁时，一定要释放所有视频控制器，避免内存泄漏：

@override
void dispose() {
  for (final controller in _videoControllers) {
    controller.dispose();
  }
  super.dispose();
}

额外注意事项 #

• 权限配置：iOS需要在Info.plist中添加相册访问权限描述：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择视频</string>
  

  Android需要在AndroidManifest.xml中添加读写权限（如果是Android 13+，还要添加READ_MEDIA_VIDEO权限）：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" android:minSdkVersion="33" />
  

• 路径非空判断：PlatformFile.path在某些平台可能为null？不过file_picker选中本地视频时一般都会有路径，保险起见可以加个非空断言或者判断。

内容的提问来源于stack exchange，提问作者kinu