Jetpack Compose中后续Modifier.width()调用为何被忽略？

我写了这段代码：

Box(
    Modifier
      .background(Color.Red)
      .height(100.dp)
      .width(100.dp)
      .width(600.dp)
)

按照链式调用的逻辑，我以为会显示一个100×600dp的红色Box，但实际始终是width(100.dp)的尺寸。

换成这段代码也一样：

Box(
    Modifier
      .background(Color.Red)
      .height(100.dp)
      .width(100.dp)
      .fillMaxWidth()
)

它还是保持100×100dp的大小，我知道怎么解决，但想搞懂背后的原理——我原本以为Box会采用链式调用中最后一次设置的宽度。

核心原理：Modifier的尺寸约束是叠加限制，而非覆盖 #

Compose里的尺寸相关Modifier（比如width()、fillMaxWidth()）并不是简单的“后面的覆盖前面的”，而是基于当前已有的约束进行叠加限制，约束的传递方向是从父布局到子布局，每个尺寸Modifier都会进一步缩小组件的可用尺寸范围：

1. width(xx.dp)的本质：这个方法会同时把组件的minWidth和maxWidth都设置为指定值，相当于给组件的宽度加上了一个“硬限制”——宽度必须等于这个值，没有调整空间。
2. 后续尺寸Modifier的生效逻辑：当你先调用width(100.dp)后，组件的宽度约束已经被固定为[100dp, 100dp]。此时再调用width(600.dp)，它尝试把min/maxWidth设为600，但因为当前的maxWidth已经被限制在100dp，这个设置无法突破已有约束，所以完全不生效。
3. fillMaxWidth()的生效逻辑：这个方法是让组件的宽度等于父布局传递的maxWidth值。但在你先设置width(100.dp)后，父传递给组件的maxWidth已经被固定为100dp，所以fillMaxWidth()只能占满这100dp的空间，看起来和没加一样。

关键结论 #

如果想要让某个尺寸设置生效，要确保它是第一个对该维度施加硬限制的Modifier，或者前面没有设置更严格的约束。比如你如果把width(600.dp)放在width(100.dp)前面，或者只保留width(600.dp)，就能得到预期的600dp宽度。

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