如何让ListView滚动时仅渲染相邻完整项，避免两项半显示在视口？

要实现一次仅显示一个视频、滚动时切换至上/下一项且无两项同时可见的效果，你需要对现有ListView做以下调整：

核心修改点 #

• 让每个列表项高度匹配屏幕视口高度，确保一次只能看到一个Item
• 使用支持吸附滚动的控制器，保证滚动结束后自动对齐到完整的Item
• 禁用shrinkWrap，让ListView占满可用空间

修改后的代码示例 #

import 'package:flutter/material.dart';

class ReelsStyleListView extends StatefulWidget {
  final List data;
  const ReelsStyleListView({super.key, required this.data});

  @override
  State<ReelsStyleListView> createState() => _ReelsStyleListViewState();
}

class _ReelsStyleListViewState extends State<ReelsStyleListView> {
  late final ScrollController _scrollController;
  late double _viewportHeight;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 获取屏幕视口高度（减去状态栏、导航栏等系统UI高度）
    _viewportHeight = MediaQuery.of(context).size.height -
        MediaQuery.of(context).padding.top -
        (MediaQuery.of(context).padding.bottom);
  }

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    // 可选：监听滚动位置，实现自定义逻辑
    _scrollController.addListener(() {
      // 这里可以添加滚动状态监听，比如判断是否滚动到顶部/底部
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.data.length,
      // 禁用shrinkWrap，让ListView占满父容器空间
      shrinkWrap: false,
      controller: _scrollController,
      // 设置每个Item的高度为视口高度
      itemExtent: _viewportHeight,
      // 使用PageScrollPhysics实现类似PageView的吸附效果
      physics: const PageScrollPhysics(),
      itemBuilder: (BuildContext context, int index) {
        // 确保你的iStreamWidget高度适配父容器（比如用Expanded或设置height: double.infinity）
        return SizedBox(
          height: _viewportHeight,
          child: iStreamWidget.render(widget.data[index]),
        );
      },
    );
  }
}

关键说明 #

• itemExtent: 强制每个列表项高度等于视口高度，保证不会出现部分Item可见的情况
• PageScrollPhysics: 让滚动行为类似PageView，松手后自动滚动到完整的Item位置
• 视口高度计算: 通过MediaQuery获取真实可用高度，避免系统UI遮挡内容
• 控制器监听: 可根据需求添加滚动监听，实现自动播放/暂停视频等逻辑

如果需要更精确的控制（比如预加载相邻Item或自定义滚动动画），也可以直接使用PageView.builder替代ListView，它天生支持单Item全屏切换的场景。

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