IntrinsicHeight 与 IntrinsicWidth 深度解析

先说重点

IntrinsicHeight 和 IntrinsicWidth 让子 Widget 的高度（或宽度）对齐到同级中最高的那一个。它们打破 Flutter 正常的单次传递布局流程，通过额外测量步骤实现”取最大值再分配”的效果。

标准布局 vs Intrinsic 布局

正常布局

1. 约束下传 — 父传给子：你最多多宽？最多多高？
2. 尺寸上传 — 子告诉父：在给定宽度下，我需要 48px 高
3. 定位绘制 — 父决定子放在 (0, 0)

这是一次性的、高效的过程。每个 Widget 在一帧中最多被布局一次。

Intrinsic 多了一步

1. 父下传约束
2. ★ Intrinsic 对每个子询问：如果宽度锁死为 X，你需要多高？
3. 取最大值作为容器高度
4. 用这个固定高度再次布局子元素

子 Widget 的子树被布局了两次——这就是额外开销的来源。

源码解读

IntrinsicHeight

// flutter/lib/src/rendering/proxy_box.dart

class RenderIntrinsicHeight extends RenderProxyBox {
  @override
  double computeMinIntrinsicHeight(double width) {
    // 如果宽度固定：取所有子元素在这个宽度下的最小固有高度
    if (child != null) return child!.getMinIntrinsicHeight(width);
    return 0.0;
  }

  @override
  double computeMaxIntrinsicHeight(double width) {
    if (child != null) return child!.getMaxIntrinsicHeight(width);
    return 0.0;
  }

  @override
  void performLayout() {
    if (child != null) {
      // ★ 关键：用 tight 宽度约束，要求子元素给出其理想高度
      BoxConstraints childConstraints = constraints.widthConstraints();
      double height = child!.getMaxIntrinsicHeight(
        childConstraints.maxWidth,
      );
      // 用算出的高度对子元素做最终布局
      child!.layout(
        childConstraints.tighten(height: height),
        parentUsesSize: true,
      );
      size = Size(child!.size.width, child!.size.height);
    } else {
      size = Size(constraints.minWidth, constraints.minHeight);
    }
  }
}

核心逻辑在 performLayout()：

1. constraints.widthConstraints() — 从父约束中提取宽度部分，形成 BoxConstraints(minWidth=..., maxWidth=...)
2. child!.getMaxIntrinsicHeight(childConstraints.maxWidth) — 第一次测量：在给定最大宽度下，子元素自然需要多高？
3. child!.layout(childConstraints.tighten(height: height)) — 第二次测量：用算出的高度做真正的布局

flowchart TD
    A[父约束下传] --> B[提取宽度约束 constraints.widthConstraints]
    B --> C["getMaxIntrinsicHeight(maxWidth)<br/>第一次测量（探高）"]
    C --> D[取子元素最大高度作为 Row 高度]
    D --> E["layout(tight height)<br/>第二次测量（真实布局）"]
    E --> F[上报尺寸]

IntrinsicWidth

结构完全对称，只是方向从高度变成宽度：

class RenderIntrinsicWidth extends RenderProxyBox {
  @override
  void performLayout() {
    if (child != null) {
      BoxConstraints childConstraints = constraints.heightConstraints();
      double width = child!.getMaxIntrinsicWidth(
        childConstraints.maxHeight,
      );
      // 对步进值向上取整
      double stepWidth = _applyStep(width, _stepWidth, _stepHeight);
      child!.layout(
        BoxConstraints(
          minWidth: stepWidth,
          maxWidth: stepWidth,
          maxHeight: childConstraints.maxHeight,
        ),
        parentUsesSize: true,
      );
      size = child!.size;
    } else {
      size = Size(constraints.minWidth, constraints.minHeight);
    }
  }

  double _applyStep(double input, double stepWidth, double stepHeight) {
    // stepWidth / stepHeight 用于"取整"，默认都是 0
    return stepWidth == 0.0
        ? input
        : (input / stepWidth).ceilToDouble() * stepWidth;
  }
}

IntrinsicWidth 多了 stepWidth 和 stepHeight 两个参数：当子元素宽度需要对齐到某个网格步进时（比如 TabBar 宽度对齐到像素网格），可以通过这两个参数取整。

性能分析

为什么说是”昂贵的”

什么场景避开

// ❌ 避免在滚动列表中大量使用
ListView.builder(
  itemCount: 1000,
  itemBuilder: (_, i) => IntrinsicHeight(
    child: Row(children: [...]),
  ),
);

// ❌ 避免嵌套 Intrinsic
IntrinsicHeight(
  child: IntrinsicWidth(
    child: ... // 子树被 layout 4 次
  ),
);

什么场景可以放心用

// ✅ 静态弹窗、表单、卡片
// ✅ 子树浅（2-3 层）
// ✅ 不频繁重建
// ✅ 子元素数量少（< 10）

实际体验：在一个典型的弹窗中（4 个 Column，每列 1 图标 + 1 行文字），IntrinsicHeight 的额外耗时在微秒级别，人眼不可感知。

使用场景

场景 1：Row 中 Column 等高

最常见的使用场景。Row 的 crossAxisAlignment: CrossAxisAlignment.stretch 只有在 Row 高度已知时才生效。而 Row 的高度由最高子元素决定……

// ❌ stretch 本身不生效——Row 不知道自己多高
Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [colA, colB, colC],
);

// ✅ IntrinsicHeight 先探高，再让 stretch 生效
IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [colA, colB, colC],
  ),
);

场景 2：对齐按钮组宽度

底部两个按钮”登录”和”注册”，宽度对齐到较宽的那个：

IntrinsicWidth(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      ElevatedButton(onPressed: () {}, child: Text('Login')),
      ElevatedButton(onPressed: () {}, child: Text('Create an Account')),
    ],
  ),
);

场景 3：TabBar 步进对齐

IntrinsicWidth(
  stepWidth: 48, // 对齐到 48px 网格
  child: TabBar(tabs: [...]),
);

技术要点速查

总结

• 用对地方是利器：弹窗、表单、按钮组等小型静态布局中，IntrinsicHeight/IntrinsicWidth 可以用几行代码替代手算高度/宽度的脏活
• 用错地方是性能雷：滚动列表、深层嵌套、高频重建的场景应避开
• 核心代价 = 子树被 layout 两次：只要子树足够小、足够浅，这个代价就微不足道