Flutter水平滚动ListView.builder交叉轴占满全屏高，如何仅包裹子项高度

问题本质原因 #

水平滚动的ListView默认会把垂直方向的空间占满，是由其内部渲染逻辑决定的：

• 作为可滚动组件，ListView本质是一个视口，当设置为水平滚动时，垂直方向属于交叉轴，其尺寸会直接取父容器传递的最大可用高度，默认撑满全屏。
• shrinkWrap属性仅控制滚动主轴方向（也就是本例中的水平方向）的尺寸收缩，对垂直方向的交叉轴没有任何作用，没法用来实现高度自适应。

符合要求的实现方式 #

不需要替换ListView组件（不用Row、Wrap替代）、不需要写死固定高度，只需要用IntrinsicHeight组件把目标ListView包裹一层即可：

• IntrinsicHeight的作用是提前测量内部所有子元素的最大固有高度，把这个自动计算出的高度值，作为垂直方向的最大约束传递给ListView。
• ListView拿到和内容完全匹配的高度约束后，会按照自身的渲染逻辑，把垂直方向的尺寸设为这个约束值，最终实现仅包裹子项内容的效果，全程保留ListView的滚动性能和组件特性。

核心调整后的代码 #

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.white,
            // 关键：用IntrinsicHeight包裹ListView实现高度自适应
            child: IntrinsicHeight(
              child: ListView.builder(
                itemCount: 10,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Container(
                    color: Colors.red,
                    child: Text(
                      'Item $index',
                      style: TextStyle(color: Colors.black),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方案优势 #

• 没有替换ListView组件，完全保留原有的滚动逻辑和懒加载性能
• 不需要手动测量子项高度、不需要硬编码固定尺寸，高度会随子项内容自动适配
• 不需要改动ListView的原有配置，仅增加一层布局约束调整组件即可生效

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