如何在Flutter的Row组件中添加可滚动的横向ListView？

你的问题核心是横向ListView缺少垂直方向的尺寸约束，Flutter布局中，横向滚动的ListView（主轴为水平）需要明确交叉轴（垂直）的高度，否则无法正确渲染滚动区域。结合你的需求，给出两种可行的修改方案：

方案1：用IntrinsicHeight匹配左侧组件高度 #

这个方案会让右侧分数列表自动对齐左侧团队标题的高度，视觉上更统一：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    TeamTitleHorizontal(teamName: teamName, teamLogoUrl: teamLogoUrl),
    IntrinsicHeight(
      child: Expanded(
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int i) {
            return Container(
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: isWinners[i] ? textUnderlineDecoration : null,
              child: Text(
                scores[i],
                style: scoreStyle,
              ),
            );
          },
          separatorBuilder: (BuildContext context, int i) {
            return const SizedBox(width: 18.0);
          },
          itemCount: scores.length,
        ),
      ),
    ),
  ],
)

方案2：固定高度（性能更优） #

如果左侧TeamTitleHorizontal的高度是固定值，直接给ListView套一个SizedBox指定高度，避免IntrinsicHeight的轻微性能开销：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    TeamTitleHorizontal(teamName: teamName, teamLogoUrl: teamLogoUrl),
    Expanded(
      child: SizedBox(
        height: 40, // 替换为左侧组件的实际高度
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int i) {
            return Container(
              decoration: isWinners[i] ? textUnderlineDecoration : null,
              child: Text(
                scores[i],
                style: scoreStyle,
              ),
            );
          },
          separatorBuilder: (BuildContext context, int i) {
            return const SizedBox(width: 18.0);
          },
          itemCount: scores.length,
        ),
      ),
    ),
  ],
)

关键说明 #

• Expanded 确保分数列表占据Row的剩余宽度，当分数项总宽度超过可用空间时，自动触发横向滚动；
• 必须给横向ListView添加垂直方向的高度约束（要么通过IntrinsicHeight自适应，要么SizedBox固定），否则Flutter无法确定组件的垂直尺寸，导致滚动失效或布局报错；
• 保留shrinkWrap: true可以让ListView仅包裹内容宽度，避免不必要的空白区域。

内容的提问来源于stack exchange，提问作者In progress...