如何在Flutter Row中基于另一个Flexible组件动态调整组件高度

核心思路 #

无需依赖GlobalKey获取尺寸后重建页面的方案，直接利用Flutter布局组件的约束传递特性，让左侧蓝色容器自动填充右侧组件高度减去红色容器固定高度后的剩余空间，同时保证左右两侧整体高度完全一致。

修改后的完整代码 #

body: Column(
  children: [
    Container(color: Colors.green, height: 40),
    // 用IntrinsicHeight让Row高度由最高子项（右侧组件）决定
    IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch, // 强制子项拉伸至Row高度
        children: [
          Flexible(
            flex: 3,
            child: Column(
              children: [
                Container(
                  color: Colors.red,
                  height: 20,
                ),
                // Expanded自动填充红色容器之外的剩余高度
                Expanded(
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
          Flexible(
            flex: 7,
            child: Container(
              color: Colors.yellow,
              child: Column(
                children: [1, 2, 3]
                    .map((e) => ListTile(
                          title: Text('testing - $e'),
                        ))
                    .toList(),
              ),
            ),
          ),
        ],
      ),
    ),
    Container(color: Colors.grey, height: 50),
  ],
),

关键细节说明 #

• IntrinsicHeight：强制Row的高度由其内部最高的子组件（此处为右侧黄色容器）决定，确保左右两侧高度完全对齐。
• CrossAxisAlignment.stretch：让Row内的Flexible子组件自动拉伸至Row的整体高度，保证左侧Column的高度与右侧组件一致。
• Expanded：在左侧Column中，红色容器固定20高度后，Expanded会让蓝色容器自动填充剩余的全部空间，无需手动计算尺寸或监听组件渲染状态。

原方案的问题 #

你之前用GlobalKey获取尺寸的方案存在两个明显缺陷：

• 初始渲染时右侧组件未完成布局，蓝色容器高度为0，会出现短暂空白或不可见的情况。
• 需要额外触发页面重建，带来不必要的性能开销。

而上述布局方案完全依赖Flutter原生的布局约束传递逻辑，一次性完成布局，既满足需求又避免了这些问题。

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