Flutter Windows应用中ListView.builder横向滚动失效问题求助

核心问题分析 #

你遇到的问题根源在于shrinkWrap: true的设置和Windows平台触摸滚动的交互逻辑冲突：

• 当设置scrollDirection: Axis.horizontal时，shrinkWrap: true会让ListView的宽度自适应所有子项的总宽度，导致没有超出视口的内容，Windows的双指滚动事件无法被识别为滚动操作。
• 纵向滚动时，SizedBox有固定高度，内容超出高度就会触发滚动，所以正常工作。

修复步骤 #

1. 移除shrinkWrap: true：让ListView使用父容器的宽度作为视口宽度，当子项总宽度超过该宽度时，自然产生滚动空间。
2. 添加强制滚动物理：设置physics: const AlwaysScrollableScrollPhysics()，确保即使内容刚好适配视口，也能触发滚动交互（针对Windows平台的触摸优化）。
3. 给SizedBox设置固定宽度：因为Column不会限制子项宽度，给SizedBox指定宽度（比如屏幕宽度），确保横向滚动的视口范围明确。

修改后的完整代码 #

SizedBox(
  height: 100,
  // 添加强制宽度，确保视口范围明确
  width: MediaQuery.of(context).size.width,
  child: Scrollbar(
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      // 强制启用滚动物理
      physics: const AlwaysScrollableScrollPhysics(),
      itemCount: serviceCategory.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: ServiceTile(
            categoryImageUrl: serviceCategory[index][0],
            categoryName: serviceCategory[index][1],
            categoryImageRadius: 22,
          ),
        );
      },
    ),
  ),
)

额外验证点 #

• 确认serviceCategory中的子项总宽度超过SizedBox的宽度，这样才能看到滚动效果。
• 如果你的ServiceTile是自适应宽度的，可以给它设置一个固定宽度（比如width: 80），确保总宽度足够触发滚动。

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