ListView横向滚动失效问题求助

问题原因 #

你的横向ListView无法滚动，核心原因是垂直方向缺少明确的高度约束。当ListView设置为横向滚动（scrollDirection: Axis.horizontal）时，其交叉轴为垂直方向，Flutter必须获取该方向的明确尺寸，才能正确计算滚动区域并启用滚动功能。

修复方案 #

方案1：给ListView包裹固定高度容器

直接用SizedBox给ListView指定垂直高度：

class _UsersPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Expanded(
            child: SizedBox(
              height: 120, // 根据UI需求设置合适高度
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 20,
                itemBuilder: (c, index) {
                  return const UserItemCircular();
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

方案2：让子组件自身携带固定高度

确保UserItemCircular组件内部设置明确的尺寸：

class UserItemCircular extends StatelessWidget {
  const UserItemCircular({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 120,
      width: 100, // 可根据需求调整宽度
      child: // 你的组件内容，比如头像、用户名等
    );
  }
}

补充说明 #

原代码中Center包裹Column，再通过Expanded让ListView占据垂直方向可用空间，但如果ListView的子项没有固定高度，Flutter无法确定ListView的垂直尺寸，导致滚动逻辑无法正常触发。给ListView或其子项设置明确高度后，就能恢复横向滚动功能。

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