让我来描述一下你可能经历过的场景。话说回来，

你正在建立一个卡片组件。在手机上，它应该垂直堆叠：图片在上，文字在下。在平板电脑上，它应该水平拉伸：图片在左，文字在右。需求很简单，对吧，

你的第一反应可能是：

@Composablefun AdaptiveCard { val configuration = LocalConfiguration.current if { VerticalCard } else { HorizontalCard }}

这种方法存在缺陷。怎么说呢， 原因如下。说起来，

LocalConfiguration.current.screenWidthDp 返回的是屏幕宽度。但如果你的卡片位于 NavigationRail 中呢？ 话说回来，或者在分屏应用中？或者在 ChromeOS 的可调整大小的窗口中呢？你的卡片并不关心屏幕大小——它只关心实际分配给它的空间。

这就是 BoxWithConstraints 解决的根本问题：它告诉你父元素分配给你的空间大小，而不是屏幕大小。

说到可以这样理解，

• LocalConfiguration = "房间有多大？"

• BoxWithConstraints = "你把我放在的盒子有多大？"

相框并不关心你的房子有多大。 它只关心分配给它的墙面空间。

内部机制的观点是，底层工作原理

Compose 执行模型

要理解 BoxWithConstraints你必须 了解 Compose 的执行流程：