Flutter中如何让同Row或Column内的Container与其他子组件高度一致

你之前两次尝试失效的核心原因，是混淆了Flutter布局的主轴/交叉轴规则和约束传递逻辑：

• 直接用Expanded包裹B组件时：Expanded只作用于当前布局的主轴方向，Row的主轴是水平方向，自然会把B组件的宽度撑到吃掉所有剩余横向空间
• 改用Column再用Expanded包B组件时：Column的主轴是垂直方向，此时Expanded会把B组件的高度撑满父级给的全部垂直空间，自然会占满整个屏幕纵向区域

如果直接给Row加crossAxisAlignment: CrossAxisAlignment.stretch，还会遇到一个额外问题：Row的父级（SafeArea）会把满屏的最大垂直高度约束传递给Row，此时Row会被拉到满屏高，最后子元素的高度也跟着变满屏，依然不符合需求。

只需要两个组件配合，就能实现两个组件完全等高、同时不撑满全屏的效果：

• 用IntrinsicHeight包裹Row布局：这个组件会提前测量所有内部子元素的固有高度，取最大值作为自身的高度，从根源上挡住父级传递过来的满屏垂直约束，让整体高度刚好匹配最高的多行文本组件的尺寸
• 给Row配置crossAxisAlignment: CrossAxisAlignment.stretch：让Row内部的所有子元素，在垂直方向（Row的交叉轴）撑满IntrinsicHeight给定的统一高度，这样橙色B组件的背景自然会和绿色多行文本组件的纵向空间完全重合
• 保持原有的mainAxisSize: MainAxisSize.min：让Row的水平宽度始终跟随两个子组件的总宽度，不会无意义撑满屏幕横向空间

import 'package:flutter/material.dart';

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

class DemoX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: IntrinsicHeight(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  color: Colors.red,
                  child: Container(
                    color: Colors.green,
                    child: Text('A1\nA2'),
                  ),
                ),
                Container(
                  color: Colors.orange,
                  alignment: Alignment.center, // 可选：让B文本在等高的橙色区域内居中
                  child: Text('B'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• 横向不会撑满屏幕：Row的最小尺寸设置保证了整体宽度刚好适配两个子组件的总宽度
• 纵向不会占满全屏：IntrinsicHeight会把整体高度锁定为绿色多行文本的固有高度，不会被SafeArea的满屏约束撑开
• 橙色背景区域会完全和相邻绿色组件的纵向空间一致，符合预期

注：如果不需要B文本居中，可以删掉橙色Container里的alignment配置，文本会默认靠上对齐。

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