实战 Compose 中的 IntrinsicSize 遇到 Compose 里 weight() 失效、高度诡异、叠层

当你的布局需要「预先知道」子项尺寸时

如果你在用 Jetpack Compose 做开发，大概率都遇到过这种让人头大的情况：布局表现完全不符合预期。

可能是 Box 里用 weight() 出现诡异行为，或是多层 UI 元素尺寸怎么都对不上。

这时候，IntrinsicSize 就该登场了。相信我，一旦理解它，它会成为你 Compose 工具箱里最强大的工具之一。

真实场景

最近我在做一个详情页界面，设计要求很明确：

界面有上下两部分

上部分主要为了显示头像，我们暂时称为头像部
- 头像部分为两层，第一层显示头像，第二层显示上下两个部分的背景
  - 第二层的背景，上部分是固定的 120dp 高度，而下部分需要铺满剩下的头像区域
下部分显示正文内容，是内容部

简单说：实现一个优雅的、悬浮在顶层的头像卡片。

当然，我给出正确的示意图（只是示意图，所以非常丑了）：

绿色部分就是顶层的上部分，蓝色部分是顶层的下部分。

这个蓝色部分，就是最难解决的地方。

遇到的难题

我需要用 Box 实现两层结构：

背景：顶部留 120dp 绿色区域，下面是蓝色背景
头像卡片：显示头像内容

第一版代码大概是这样：

@Composable
fun IntrinsicPage(
    onNavigate: (Any) -> Unit,
    onBack: () -> Unit,
) {
    Column(

    ) {
        Box(modifier = Modifier
            .fillMaxWidth()
        ) {
            // 下层：背景
            Column(modifier = Modifier.fillMaxWidth()) {
                
                // 绿色部分
                Spacer(modifier = Modifier
                    .fillMaxWidth()
                    .height(120.dp)
                    .drawBackground(Color.Green)) 
               
                // 蓝色部分
                Spacer(
                    modifier = Modifier
                        .fillMaxWidth()
                        .weight(1f)  // 占满剩余空间
                        .background(Color.Blue)
                )
            }

            // 上层：卡片
            Card(modifier = Modifier
                .padding(vertical = 24.dp)
                .align(Alignment.TopCenter)) {
                Image(painter = R.drawable.plant.inPainter(), contentDescription = null, modifier = Modifier.size(320.dp))
            }
        }

        Text(text = xxx) // 下部分的内容
    }
}

结果：效果完全不对。

根本原因

Compose 单次测量机制。

先回顾一下 Compose 布局原理：

Compose 为了性能，采用单次测量流程：

父组件给子组件传入约束
子组件测量自己
父组件确定自己尺寸
摆放子组件

问题就出在：

Box 在测量子组件时，两个子项互相不知道对方大小，是独立测量的。

为什么会失效

这里主要是 weight() 的意义不明确。

weight() 的意思是：

「按比例占据剩余空间」。

但「剩余空间」是相对于谁？

Box 自己还没确定高度，它在等子组件报尺寸；

子组件又在等 Box 给高度。

典型循环依赖：

Box：你们多高？
├─ Column：我要 120dp + weight 占的高度，但 weight 取决于你多高！
└─ Card：我大概要 320dp + 24dp + 24dp。

Box：我懵了……

IntrinsicSize：打破循环依赖

IntrinsicSize 就是 Compose 允许父组件先问子组件一个「假设性问题」：

「如果给你无限空间，你最小/最大需要多大？」

这就是固有尺寸：在正式测量前，先预测量一遍，拿到子项的理想最小/最大尺寸。

Min vs Max

IntrinsicSize.Min：子项能正常显示内容的最小高度/宽度
IntrinsicSize.Max：子项在内容不溢出前提下的最大高度/宽度

一行代码解难题

真正的“魔法”就这一句：

.height(IntrinsicSize.Min)

也就是这样修改最顶层的 Box：

Box(modifier = Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min)
) {
 //....
}

Why

当 Box 用 height(IntrinsicSize.Min) 时：

先问每个子项：你最小要多高？
- Column：120dp（最小可缩到 0 的 weight 不计入）
- Card：368dp
Box 取最大值：max(120dp, 368dp) = 368dp
有了确定高度，weight(1f) 就能正常计算：
- 总高度：368dp
- 绿色高度：120dp
- 蓝色背景：368dp - 120dp = 248dp

循环依赖直接解决。

三大经典使用场景

1. Row 内按钮等高

问题：文字长短不一，按钮高度不一样。

解法：


Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Button(
        modifier = Modifier.weight(1f).fillMaxHeight(),
        onClick = {}
    ) {
        Text("短按钮")
    }

    Button(
        modifier = Modifier.weight(1f).fillMaxHeight(),
        onClick = {}
    ) {
        Text("这是一个\n很长很长\n的按钮")
    }
}

效果：两个按钮高度统一，以最高那个为准。

右边的按钮高一点，按照右边的高度为准，两个按钮一样高。

2. 分隔线高度自动匹配文本

问题：分隔线无法跟多行文本一样高。

解法：

Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Text("左边内容\n有多行\n文本")

    Divider(
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )

    Text("右边")
}

效果：分隔线自动撑满文本高度。

这个非常实用！

3. 动态宽度卡片 + 角标对齐

问题：角标要跟卡片同宽，但卡片宽度不固定。

解法：

Box(
    modifier = Modifier.width(IntrinsicSize.Max) // 这里用到了 Max
) { 
    Card {
        Column(Modifier.padding(top = 20.dp)) {
            Text("动态内容...")
            Text("动态内容...")
            Text("动态内容...")
            Text("动态内容...")
        }
    }

    Badge(
        modifier = Modifier
            .align(Alignment.TopEnd)
            .fillMaxWidth()
    ) {
        Text("12")
    }
}

当然，各位可以尝试一下，把 Max 改成 Min 是效果，相信我，这个改动会让你一下明白 Max 和 Min 的区别。

性能注意事项

IntrinsicSize 会触发两次测量：

第一次：预测量，获取固有尺寸
第二次：正式测量与布局

所以不能滥用：

尽量别用的场景

LazyColumn / LazyRow 长列表大量 item 里
深层嵌套 Intrinsic 测量
能用固定尺寸 / wrapContentHeight() 搞定的
性能敏感的页面核心路径

总结

IntrinsicSize.Min：取子项能正常显示的最小尺寸
IntrinsicSize.Max：取子项内容不溢出的最大尺寸
专门解决：父组件与子组件、子组件之间的尺寸循环依赖
对多层布局、weight()、fillMaxHeight() 场景几乎是刚需
有轻微性能开销，合理使用即可

以后再遇到 Compose 里 weight() 失效、高度诡异、叠层对不齐时，记得先想想：

是不是该用 IntrinsicSize 了？

实战 Compose 中的 IntrinsicSize