Flutter中如何让ListView滚动时停留在每个元素位置

要让横向滚动的列表每次滚动后停留在单个元素上，有两种简单可行的方案：

方案1：用PageView替代ListView（推荐） #

PageView本身就是为分页滚动设计的，天然支持滚动后吸附到每一页，完全匹配你的需求。只需把ListView.builder替换为PageView.builder，同时确保每个子项在滚动方向上占满视口尺寸：

Widget _list() {
  return PageView.builder(
    scrollDirection: _horizontalDisplay ? Axis.horizontal : Axis.vertical,
    itemCount: data!.length,
    itemBuilder: (context, index) {
      // 横向滚动时子项宽度设为屏幕宽度；纵向滚动时高度设为屏幕高度
      return SizedBox(
        width: _horizontalDisplay ? MediaQuery.of(context).size.width : null,
        height: !_horizontalDisplay ? MediaQuery.of(context).size.height : null,
        child: widgetToDisplay(index),
      );
    },
  );
}

方案2：修改ListView的物理滚动特性 #

如果坚持使用ListView，可以将physics改为PageScrollPhysics，同样需要保证子项在滚动方向上的尺寸与视口一致：

Widget _list() {
  return ListView.builder(
    physics: const PageScrollPhysics(), // 替换为分页滚动物理特性
    scrollDirection: _horizontalDisplay ? Axis.horizontal : Axis.vertical,
    itemCount: data!.length,
    itemBuilder: (context, index) {
      return SizedBox(
        width: _horizontalDisplay ? MediaQuery.of(context).size.width : null,
        height: !_horizontalDisplay ? MediaQuery.of(context).size.height : null,
        child: widgetToDisplay(index),
      );
    },
  );
}

关键说明 #

两种方案的核心都是让每个子项在滚动方向上占据整个视口空间，配合分页滚动的物理特性，就能实现滚动时自动停留在单个元素的效果。如果你的子项本身已经占满视口尺寸，可以省略SizedBox的包裹。

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