Flutter报错：RenderFlex子项含非零flex但宽度约束无界

错误原因 #

你遇到的RenderFlex children have non-zero flex but incoming width constraints are unbounded错误，核心矛盾在于：

• 横向滚动的ListView.builder中，每个item的布局在水平方向是无约束的（因为要支持横向滚动，父容器不会给item固定宽度）
• 你在Row内部使用了Expanded，它要求父容器（即Row）提供明确的水平宽度，才能计算剩余空间进行分配，两者冲突导致报错

修复方案 #

给每个ListView的item（也就是Row）包裹一个固定宽度的容器，让Row获得明确的水平约束，这样Expanded就能正常工作。修改后的代码如下：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('MY CART', style: GoogleFonts.oswald(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.w400)),
    const SizedBox(height: 20.0),
    SizedBox(
      height: 180.0,
      width: double.infinity,
      child: ListView.builder(
        itemCount: 2,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index){
          // 给每个item添加固定宽度的容器
          return SizedBox(
            width: 300.0, // 根据实际需求调整宽度
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 150.0,
                  width: 150.0,
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('assets/images/dress.jpg')
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15.0))
                  ),
                ),
                const SizedBox(width: 10.0),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('PRODUCT TITLE',
                        style: GoogleFonts.oswald(
                            textStyle: const TextStyle(
                                color: Colors.black,
                                fontSize: 14.0)), overflow: TextOverflow.visible,),
                      const SizedBox(height: 5.0),
                      Text('SIZE: M',
                          style: GoogleFonts.oswald(
                              textStyle: const TextStyle(
                                  color: Colors.black45,
                                  fontSize: 16.0))),
                      const SizedBox(height: 10.0),
                      Text('10 DOLLARS',
                          style: GoogleFonts.oswald(
                              textStyle: const TextStyle(
                                  color: Colors.black,
                                  fontSize: 16.0))),
                    ],
                  ),
                )
              ],
            ),
          );
        },
      ),
    ),
],
)

其他可选方案 #

如果不想固定item宽度，也可以去掉Expanded，直接给右侧的Column设置固定宽度：

// 替换原有的Expanded组件
SizedBox(
  width: 130.0, // 按需调整宽度
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 原有文本内容
    ],
  ),
)

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