Flutter中在Row组件内嵌入ListView.builder出现报错如何解决

你遇到的报错本质是水平方向无边界约束冲突：Row组件本身不会给子元素限制水平宽度，而水平滚动的ListView.builder默认会尝试占用所有可用水平空间，二者叠加就会导致布局无法计算尺寸抛出错误。

只需要将ListView.builder用Expanded组件包裹即可，Expanded会在Row中自动占据除第一个固定宽度Column之外的所有剩余水平空间，完美匹配你要的布局效果。

修改后的核心代码如下：

body: SingleChildScrollView(
  child: Column(
    children: [
      Row(
        children: [
          // 第一个固定的Column组件保持不变
          Column(
            children: [
              Stack(
                children: [
                  Container(
                    height: 60,
                    width: 60,
                    decoration: const BoxDecoration(
                        color: Colors.red,
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            image: AssetImage("assets/images/meee.jpg"))),
                  ),
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: Container(
                      padding: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          color: Colors.blue, shape: BoxShape.circle),
                      child: Text(
                        "+",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )
                ],
              ),
              const SizedBox(
                height: 7,
              ),
              const Text(
                "Your Story",
                style: TextStyle(color: Colors.white, fontSize: 13),
              )
            ],
          ),
          // 用Expanded包裹ListView.builder解决约束冲突
          Expanded(
            child: ListView.builder(
              itemCount: 3,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                return __buildStory();
              },
            ),
          ),
        ],
      ),
    ],
  ),
),

• 建议你自定义的__buildStory方法返回的组件设置固定宽度，避免水平滚动列表内部出现布局异常。
• 如果需要给滚动区域和左侧头像区留出间距，可以给Expanded的child加padding属性调整。

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