Flutter：如何让ListView高度匹配同级Column高度（规避无限高度错误）

问题核心在于ListView.builder默认会请求无限垂直空间，而IntrinsicHeight需要子组件能确定自身高度，两者冲突。要让右侧ListView高度匹配左侧Column的实际高度，可以通过获取左侧组件的渲染高度，再将该高度赋值给右侧ListView的容器来实现，具体步骤如下：

1. 给左侧Column所在的容器添加GlobalKey，用于获取其渲染后的实际高度
2. 在组件渲染完成后，通过GlobalKey获取左侧容器的高度
3. 用SizedBox包裹右侧ListView.builder，将获取到的高度作为SizedBox的高度，同时给ListView设置shrinkWrap: true和合适的滚动物理效果

修改后的完整代码：

import 'package:flutter/material.dart';

class MatchHeightRow extends StatefulWidget {
  const MatchHeightRow({super.key});

  @override
  State<MatchHeightRow> createState() => _MatchHeightRowState();
}

class _MatchHeightRowState extends State<MatchHeightRow> {
  // 用于获取左侧容器的高度
  final GlobalKey _leftContainerKey = GlobalKey();
  double _leftContainerHeight = 0;

  @override
  void initState() {
    super.initState();
    // 组件渲染完成后获取高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_leftContainerKey.currentContext != null) {
        final renderBox = _leftContainerKey.currentContext!.findRenderObject() as RenderBox;
        setState(() {
          _leftContainerHeight = renderBox.size.height;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
      child: Row(
        children: [
          Expanded(
            // 给左侧容器添加GlobalKey
            child: Container(
              key: _leftContainerKey,
              color: Colors.blue,
              child: Column(
                children: [
                  Container(
                    decoration: const BoxDecoration(color: Colors.white),
                    child: const Text("a\nb"),
                  ),
                  Container(
                    decoration: const BoxDecoration(color: Colors.white),
                    child: const Text("a\nb"),
                  ),
                  Container(
                    decoration: const BoxDecoration(color: Colors.white),
                    child: const Text("a\nb"),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 20), // 替换Gaps.h20为原生SizedBox，也可保留原组件
          Expanded(
            // 用SizedBox限制ListView高度
            child: SizedBox(
              height: _leftContainerHeight,
              child: ListView.builder(
                shrinkWrap: true,
                // 固定高度下使用ClampingScrollPhysics避免滚动越界效果
                physics: const ClampingScrollPhysics(),
                itemCount: 10,
                itemBuilder: (context, index) {
                  return const Text("test");
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• GlobalKey：用于定位左侧容器的渲染对象，从而获取其实际高度
• addPostFrameCallback：确保在组件首次渲染完成后再获取高度，避免获取到0值
• shrinkWrap: true：让ListView根据子项内容收缩自身高度，但外层的SizedBox会限制其最大高度为左侧容器的高度，超出部分可滚动
• ClampingScrollPhysics：在固定高度的ListView中，使用该物理效果可以让滚动到边界时没有弹性回弹，体验更自然

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