如何缩小ListView.builder预渲染范围，仅初始化当前可见VideoPlayer？

1. 调整ListView的cacheExtent参数 #

Flutter的ListView.builder默认会提前渲染可见区域外一定范围的项（由cacheExtent控制，默认值约为视口尺寸的25%），你可以直接缩小这个值来减少预渲染数量：

ListView.builder(
  cacheExtent: 50.0, // 可根据滚动流畅度调整，设为0.0会完全关闭预渲染（可能导致滚动空白）
  itemCount: videoList.length,
  itemBuilder: (context, index) {
    return VideoItem(video: videoList[index]);
  },
)

建议先尝试50.0-100.0的数值，在滚动流畅度和内存占用间找到平衡。

2. 基于可见性控制播放器初始化 #

即使ListView预渲染了项，也可以通过监听项的可见状态，只在项真正可见时才初始化VideoPlayer：
使用VisibilityDetector组件（需在pubspec.yaml中添加对应依赖），监听项的可见度阈值：

class VideoItem extends StatefulWidget {
  final Video video;
  const VideoItem({super.key, required this.video});

  @override
  State<VideoItem> createState() => _VideoItemState();
}

class _VideoItemState extends State<VideoItem> {
  VideoPlayerController? _controller;
  bool _isVisible = false;

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

  Future<void> _initController() async {
    if (_isVisible && _controller == null) {
      _controller = VideoPlayerController.networkUrl(Uri.parse(widget.video.url));
      await _controller?.initialize();
      setState(() {});
    }
  }

  void _updateVisibility(VisibilityInfo info) {
    setState(() {
      _isVisible = info.visibleFraction >= 0.8; // 可见度超过80%时视为有效可见
    });
    if (_isVisible) {
      _initController();
    } else {
      _controller?.dispose();
      _controller = null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: Key('video-${widget.video.id}'),
      onVisibilityChanged: _updateVisibility,
      child: _controller != null && _controller!.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller!.value.aspectRatio,
              child: VideoPlayer(_controller!),
            )
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

这种方式完全不受ListView预渲染影响，只有真正出现在屏幕上的项才会初始化播放器。

3. 通过滚动控制器精准控制可见项 #

如果你的视频项高度固定，可以通过ScrollController计算当前可见的项索引，只对这些索引的项初始化播放器：

class VideoList extends StatefulWidget {
  final List<Video> videoList;
  const VideoList({super.key, required this.videoList});

  @override
  State<VideoList> createState() => _VideoListState();
}

class _VideoListState extends State<VideoList> {
  final ScrollController _scrollController = ScrollController();
  Set<int> _visibleIndices = {};
  final double _itemHeight = 200.0; // 固定项高度

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_updateVisibleIndices);
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateVisibleIndices());
  }

  void _updateVisibleIndices() {
    final viewportHeight = MediaQuery.of(context).size.height;
    final scrollOffset = _scrollController.offset;
    final startIndex = (scrollOffset / _itemHeight).floor();
    final endIndex = ((scrollOffset + viewportHeight) / _itemHeight).ceil();

    setState(() {
      _visibleIndices = Set.from(List.generate(endIndex - startIndex + 1, (i) => startIndex + i));
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: widget.videoList.length,
      itemExtent: _itemHeight,
      itemBuilder: (context, index) {
        return VideoItem(
          video: widget.videoList[index],
          shouldInitialize: _visibleIndices.contains(index),
        );
      },
    );
  }
}

在VideoItem中根据shouldInitialize参数控制播放器的初始化与销毁，这种方式适合高度固定的列表，控制精度更高。

额外提示 #

• 务必确保VideoPlayerController在项不可见时及时调用dispose()，避免内存泄漏；
• 动态高度列表优先选择VisibilityDetector方案，适配性更强；
• 若使用cacheExtent，不要直接设为0，优先尝试小数值平衡体验与性能。

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