Flutter中如何实现Column嵌套Row再包含两个ListView的布局？

这个Column→Row→两个ListView的布局完全可行，你的代码无法正常工作的核心问题是：Row中的ListView没有明确的水平宽度约束，导致布局引擎无法计算其尺寸。

问题原因 #

Row是水平方向的线性布局，而ListView默认会尝试占用尽可能多的水平空间，但在Row容器中，若不给ListView指定宽度限制（比如通过Expanded、Flexible或固定宽度），它会无限扩展，触发布局溢出错误。即使设置了shrinkWrap: true，也只是让ListView在垂直方向收缩，水平方向的约束依然缺失。

修正后的代码 #

给每个ListView外层包裹Expanded，让它们平分Row的水平空间，同时添加间距优化布局：

Expanded(
  child: Row(
    children: [
      Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: selectedMainCasteIds?.length,
          itemBuilder: (context, index) {
            return Text(
              '${selectedMainCasteIds![index].mainCasteName}',
              style: TextStyle(fontSize: 10),
            );
          },
        ),
      ),
      SizedBox(width: 16),
      Text('ddddd'),
      SizedBox(width: 16),
      Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: selectedMainCasteIds?.length,
          itemBuilder: (context, index) {
            return Text(
              '${selectedMainCasteIds![index].mainCasteName}',
              style: TextStyle(fontSize: 10),
            );
          },
        ),
      ),
    ],
  ),
),

其他可选方案 #

• 如果不需要两个ListView平分宽度，可以用Flexible并设置flex属性分配比例，比如Flexible(flex: 2, child: ListView(...))和Flexible(flex: 1, child: ListView(...))。
• 也可以给ListView外层套Container指定固定宽度，比如Container(width: 120, child: ListView(...))，适合需要固定宽度的场景。

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