Flutter实现图片视频混合列表类Facebook滑动浏览的方案咨询

实现方案 #

你之前的实现逻辑核心问题是将图片浏览组件和视频组件做了互斥切换，滑动逻辑不统一，直接用PageView统一承载所有资源即可实现和Facebook完全一致的左右平滑切换效果，具体实现步骤如下：

1. 提前预处理资源类型
   不要在build阶段临时拆分URL后缀判断类型，避免重复计算，也能规避带查询参数的URL判断错误的问题：

enum MediaType { image, video }
class MediaItem {
  final String url;
  final MediaType type;
  MediaItem({required this.url, required this.type});
}

// 初始化时统一处理资源列表
List<MediaItem> mediaList = yourUrlList.map((url) {
  // 先去除URL后的查询参数
  String pureUrl = url.split('?').first;
  String suffix = pureUrl.split('.').last.toLowerCase();
  if (['jpg', 'jpeg', 'png', 'gif', 'webp'].contains(suffix)) {
    return MediaItem(url: url, type: MediaType.image);
  } else if (['mp4', 'avi', 'mov', 'mkv'].contains(suffix)) {
    return MediaItem(url: url, type: MediaType.video);
  }
  return MediaItem(url: url, type: MediaType.image);
}).toList();

2. 用PageView统一承载资源
   PageView天然支持横向平滑滑动切换，每个子项根据资源类型分别渲染，同时处理视频的生命周期避免多视频同时播放占用资源：

int currentIndex = 0;
late PageController pageController;

@override
void initState() {
  super.initState();
  pageController = PageController(initialPage: currentIndex);
}

@override
void dispose() {
  pageController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black87,
    body: GestureDetector(
      onVerticalDragEnd: (data) {
        if ((data.primaryVelocity?.abs() ?? 0) > 200) {
          Navigator.of(context).pop();
        }
      },
      onLongPress: () {
        final currentItem = mediaList[currentIndex];
        bottomSheet(
          context,
          imgBS({
            "name": currentItem.url.split("/").last.split("?").first,
            "url": currentItem.url,
          }, context)
        );
      },
      child: PageView.builder(
        controller: pageController,
        scrollDirection: Axis.horizontal,
        physics: const BouncingScrollPhysics(),
        itemCount: mediaList.length,
        onPageChanged: (idx) {
          setState(() {
            currentIndex = idx;
          });
        },
        itemBuilder: (context, index) {
          final item = mediaList[index];
          if (item.type == MediaType.image) {
            // 复用你之前的PhotoView逻辑即可，支持缩放
            return PhotoView(
              imageProvider: (widget.type == null || widget.type == 'network' || widget.type == '')
                ? NetworkImage(item.url)
                : FileImage(File(item.url)),
              initialScale: PhotoViewComputedScale.contained,
              errorBuilder: (context, object, trace) => const Center(child: Icon(Icons.info, color: Colors.white)),
              minScale: PhotoViewComputedScale.contained,
              maxScale: PhotoViewComputedScale.covered * 1.5,
              backgroundDecoration: const BoxDecoration(color: Colors.transparent),
            );
          } else {
            // 视频组件，仅当前展示的页面自动播放，切走后自动销毁播放器释放资源
            return VideoPlayerWidget(
              url: item.url,
              autoPlay: index == currentIndex,
            );
          }
        },
      ),
    ),
  );
}

3. 视频组件适配注意点
   你之前使用flick_video_player效果不符合预期大概率是没有处理页面切换的生命周期，在自定义的VideoPlayerWidget中加入判断：当autoPlay为false时直接释放播放器资源，为true时初始化并播放，即可避免多视频同时出声、内存占用过高的问题。如果需要视频也支持缩放，可以把视频组件套在PhotoView中，和图片交互逻辑保持统一。

优化建议 #

• 图片可以使用缓存组件，避免滑动时重复加载
• 可以预加载相邻1-2个资源的首帧，切换时不会出现黑屏
• 可自定义PageView的动画曲线，更贴合你需要的滑动手感

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