如何解决PageView.builder切换页面时API视频播放滞后问题？

问题核心原因 #

你当前的问题出在使用单个_videoUrl变量给所有PageView item提供视频链接：
PageView的item是复用机制，加上API请求是异步操作，导致页面切换时，新页面会先使用旧的_videoUrl渲染；等API返回新链接更新变量后，已经切换到下一个页面，最终出现“视频滞后一步”的现象。

解决方案 #

改用列表存储每个页面对应的独立视频URL，配合预加载逻辑确保页面切换时视频链接已准备好，同时让VideoPlayerItem能响应URL变化重新初始化播放器。

修改后的核心代码片段

1. 更新状态变量

late PageController _pageController;
// 用列表存储每个页面的视频URL，每个index对应独立链接
List<String?> _videoUrls = [];
// 预加载前后2个页面的视频，避免切换卡顿
final _preloadCount = 2;

2. 初始化与预加载逻辑

@override
void initState() {
  super.initState();
  _pageController = PageController();
  // 初始化时预加载初始页面附近的视频
  _preloadVideos(0);
  _pageController.addListener(_onPageChanged);
}

// 预加载指定index前后范围内的视频
void _preloadVideos(int currentIndex) {
  final startIndex = max(0, currentIndex - _preloadCount);
  final endIndex = min(_videoUrls.length + _preloadCount, 100000);
  
  for (int i = startIndex; i <= endIndex; i++) {
    if (i >= _videoUrls.length) {
      // 该index尚未加载视频，发起API请求
      _fetchVideoForIndex(i);
    }
  }
}

// 为指定index单独请求视频URL
void _fetchVideoForIndex(int index) async {
  _homeVideoScreenViewModel = ref.read(homeVideoScreenViewModel);
  _homeVideoScreenViewModel.attachView(this);
  _homeVideoScreenViewModel.getHomeRandomVideo();

  String newVideoUrl = await _homeVideoScreenViewModel.getRandomVideoResponseModel.data?.video ?? "";
  
  setState(() {
    // 确保列表长度足够，不足时填充空占位
    while (_videoUrls.length <= index) {
      _videoUrls.add(null);
    }
    _videoUrls[index] = newVideoUrl;
    print("Index $index 视频链接: $newVideoUrl");
  });
}

void _onPageChanged() {
  if (_pageController.page == _pageController.page!.round()) {
    final currentIndex = _pageController.page!.round();
    // 滚动到新页面时，预加载当前页面附近的视频
    _preloadVideos(currentIndex);
  }
}

3. 更新PageView的itemBuilder

itemBuilder: (context, index) {
  // 若当前index的视频尚未加载，显示加载占位
  if (index >= _videoUrls.length || _videoUrls[index] == null) {
    return const Center(child: CircularProgressIndicator());
  }
  
  return Stack(
    children: [
      VideoPlayerItem(
        videoUrl: _videoUrls[index] ?? "",
      ),
      // 其他UI元素...
    ],
  );
}

4. 确保VideoPlayerItem响应URL变化
   修改VideoPlayerItem，在URL更新时重新初始化播放器：

class VideoPlayerItem extends StatefulWidget {
  final String videoUrl;
  const VideoPlayerItem({super.key, required this.videoUrl});

  @override
  State<VideoPlayerItem> createState() => _VideoPlayerItemState();
}

class _VideoPlayerItemState extends State<VideoPlayerItem> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _initController();
  }

  @override
  void didUpdateWidget(covariant VideoPlayerItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    // URL变化时，销毁旧控制器并初始化新的
    if (oldWidget.videoUrl != widget.videoUrl) {
      _controller.dispose();
      _initController();
    }
  }

  void _initController() {
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl))
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
        _controller.setLooping(true);
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : const Center(child: CircularProgressIndicator());
  }
}

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