Jetpack Compose获取组件尺寸的方式

前言

在 Jetpack Compose 中，onGloballyPositioned 和 onSizeChanged 都可以用来获取组件的尺寸（宽高），但它们的使用场景和行为略有不同。

选择哪个更好，取决于你的具体需求。

两种方式对比

onGloballyPositioned

• 作用：当布局节点在全局坐标系中完成布局后触发。

• 特点：

  • 提供 LayoutCoordinates 对象，可获取位置、尺寸、边界等信息。
  • 可以获取 精确的像素值（Int）。
  • 触发时机：每次布局发生变化时都会调用（包括位置、尺寸变化）。

示例：

var size by remember { mutableStateOf(IntSize.Zero) }

Box(
    modifier = Modifier
        .onGloballyPositioned { coordinates ->
            size = coordinates.size // IntSize(width, height)
        }
)

onSizeChanged

• 作用：当组件的尺寸发生变化时触发。

• 特点：

  • 只提供 宽度和高度（Int），不提供位置或其他布局信息。
  • 更加 轻量、语义清晰，专用于监听尺寸变化。
  • 不会因为位置变化而触发（比如父容器滚动但尺寸不变时不会触发）。

示例：

var size by remember { mutableStateOf(IntSize.Zero) }

Box(
    modifier = Modifier
        .onSizeChanged { width, height ->
            size = IntSize(width, height)
        }
)

推荐使用场景

场景	推荐 Modifier
只需要知道组件的宽高，且只在尺寸变化时响应	✅ onSizeChanged（更高效、语义明确）
需要获取位置、边界、或更多布局信息（如 center、localToWindow 等）	✅ onGloballyPositioned
需要处理动画、手势或与其他布局坐标交互	✅ onGloballyPositioned

性能对比

• onSizeChanged 内部其实是基于 onGloballyPositioned 实现的，但它做了优化，仅在尺寸变化时才回调。
• 如果你不需要位置信息，使用 onSizeChanged 可以避免不必要的回调，性能略优。

总结

如果你只是想获取组件的宽高，推荐使用 onSizeChanged；如果还需要位置或其他布局信息，则使用 onGloballyPositioned。

两者都是安全且常用的，根据需求选择即可。