Flutter水平ListView.builder报unbounded宽度约束错误的解决方法

问题原因 #

水平滚动的ListView.builder不会为子Widget提供明确的宽度上限（约束为unbounded），但你的CustomWidget内部使用了Row+Expanded组合——Expanded需要父级有确定的宽度约束才能计算剩余空间分配，两者冲突导致报错。

解决方案 #

核心思路是给水平ListView的每个item设置基于可用空间的相对宽度，既不用固定宽度值，又能让CustomWidget的内部布局正常工作；同时不影响它在GridView中的适配（GridView本身会给子Widget提供确定的宽度约束）。

具体修改 #

只需要在主页面的ListView.itemBuilder中，用FractionallySizedBox包裹CustomWidget，通过widthFactor设置item宽度占父容器的比例（比如0.7，可根据需求调整）：

修改后的主页面代码：

Scaffold(
  body: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      children: [
        const SizedBox(height: 100,),
        SizedBox(
          height: 100,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 10,
            itemBuilder: (_, __) {
              // 添加FractionallySizedBox包裹CustomWidget
              return FractionallySizedBox(
                widthFactor: 0.7, // 占父容器宽度的70%，可按需调整
                child: const CustomWidget(),
              );
            },
          ),
        )
      ],
    ),
  ),
)

自适应说明 #

• 水平ListView场景：FractionallySizedBox基于父容器（屏幕宽度减去左右Padding）的宽度，给CustomWidget分配确定的宽度，解决无限约束问题；
• GridView场景：直接使用CustomWidget即可，GridView会根据crossAxisCount等参数自动给子Widget分配确定宽度，内部的Row+Expanded能正常工作。

备选方案（内容自适应宽度） #

如果希望item宽度根据内容自动调整，但不超过屏幕一定比例，可使用ConstrainedBox替代FractionallySizedBox：

return ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width * 0.7,
  ),
  child: const CustomWidget(),
);

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