Flutter中ListView结合Flex实现滚动响应式页面为何需设容器高度？

原因分析 #

ListView是滚动容器，它不会给子组件提供垂直方向的尺寸约束——毕竟它的设计就是允许子组件无限延伸、支持滚动。而你的布局里，当屏幕宽度不足800时，Flex会切换为垂直方向（等效于Column），再加上里面用了Expanded组件，Expanded会试图占据父容器的所有可用空间。此时如果外层Container没有设置height，Flex就没有明确的垂直约束，会试图无限扩展高度，这和ListView的特性冲突，导致布局无法正常渲染，所以必须手动设置height来给Flex一个明确的垂直边界。

解决方案 #

不需要硬写固定height，有更灵活的方式：

1. 用IntrinsicHeight包裹Flex

IntrinsicHeight会自动计算子组件的固有高度，把这个高度作为约束传递给外层Container，这样ListView就能正确识别子组件的高度，无需手动设置固定值。修改后的代码如下：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    bool isScreenWide = MediaQuery.sizeOf(context).width >= 800;

    return Scaffold(
        body: ListView(
      children: [
        Container(
          color: Colors.blue[100],
          child: IntrinsicHeight(
            child: Flex(
              direction: isScreenWide ? Axis.horizontal : Axis.vertical,
              children: [
                Expanded(
                  child: Container(
                      padding: const EdgeInsets.all(20),
                      alignment: Alignment.topLeft,
                      child: const Text("1")),
                ),
                Expanded(
                  child: Container(
                      padding: const EdgeInsets.all(20),
                      alignment: Alignment.topLeft,
                      child: const Text("2")),
                ),
              ],
            ),
          ),
        ),
      ],
    ));
  }
}

2. 让子组件提供明确高度（如果内容固定）

如果Flex里的子组件本身有确定的高度（比如文本行数固定、包含固定尺寸的控件），可以去掉Expanded，让Flex根据子组件的实际高度自动计算整体高度，这样也不需要设置Container的height。

3. 用SingleChildScrollView替代ListView（如果只有这一个子组件）

如果页面只有这一个可滚动的区块，也可以用SingleChildScrollView包裹整个布局，它会根据子组件的实际尺寸来确定滚动范围，不过这种方式和ListView的性能表现略有不同，适合内容较少的场景。

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