Flutter：Card内嵌水平ListView.Builder报无限宽度错误求助

嘿，我明白你遇到的麻烦了——垂直列表好好的，一换成水平就报错加消失，这确实挺头疼的。咱们来拆解一下问题，再给你修复方案：

问题根源 #

水平方向的ListView（scrollDirection: Axis.horizontal）有个关键要求：它的交叉轴（也就是垂直方向）必须有确定的尺寸约束，因为滚动组件的交叉轴不能是无限的。同时，你的列表项ListTile在水平滚动模式下，如果没有固定宽度，会试图扩展到无限宽度，这就触发了BoxConstraints forces an infinite width的错误。

你原代码里的结构有点冗余，外层的Container(height:250)虽然设了高度，但内部嵌套的Container(width:250)反而给水平ListView添了不必要的约束，导致布局冲突。

修复后的代码 #

我给你调整了结构，去掉冗余部分，同时满足水平ListView的布局要求：

Expanded(
  child: Card(
    color: Color(_colors.getBackgroundColor()),
    elevation: 10.0,
    shadowColor: Colors.black54,
    margin: EdgeInsets.all(8.0),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
      side: BorderSide(color: Color(_colors.getLightMainColor()))
    ),
    child: SizedBox(
      height: 250.0, // 给水平ListView明确的垂直高度约束
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 5, // 多设几个item方便测试滚动
        itemBuilder: (context, index) {
          // 给每个列表项固定宽度，避免无限扩展
          return Container(
            width: 160.0,
            child: ListTile(
              title: Text('Test Item $index'),
            ),
          );
        },
      ),
    ),
  ),
)

关键调整说明 #

1. 移除冗余Container：把外层的Container(height:250)换成Card内部的SizedBox(height:250)，直接给水平ListView提供明确的垂直高度约束，满足交叉轴的布局要求。
2. 给列表项固定宽度：给每个ListTile套一个固定宽度的Container，避免item试图占用无限宽度，彻底解决无限宽度的错误。
3. 简化结构：让Expanded直接包裹Card，保证Card能占满垂直方向的剩余空间，同时不影响水平方向的布局逻辑。

额外提示 #

如果不想给列表项固定宽度，也可以用ListView.builder的itemExtent属性统一设置每个item的宽度，效果是一样的：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemExtent: 160.0, // 统一设置item宽度
  itemCount: 5,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Test Item $index'),
    );
  },
)

这样调整后，你的水平列表应该就能正常显示，也不会再报无限宽度的错误啦！

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