如何在Box内将Composable精准放置于两组件间并叠加显示

要实现红色组件叠加在左右两个组件之间且不影响它们的布局尺寸，核心思路是利用Box的叠加特性，结合onGloballyPositioned获取左侧组件的布局信息，再通过offset对红色组件进行视觉定位（不参与布局测量）。

具体实现步骤： #

1. 用Box作为根容器：Box允许子组件叠加布局，且不会强制子元素占满容器空间，适合这种叠加场景。
2. 获取左侧组件的布局信息：通过onGloballyPositioned modifier捕获左侧组件在父容器中的位置和尺寸，保存到状态变量中。
3. 定位红色组件：利用状态变量里的左侧组件信息，通过offset modifier调整红色组件的位置，实现与左右组件的叠加效果，且红色组件的尺寸不会影响左右组件的布局计算。

代码示例： #

@Composable
fun OverlayLayout() {
    // 保存左侧组件的布局位置与尺寸
    val leftComponentRect = remember { mutableStateOf(Rect.Zero) }

    Box(modifier = Modifier.fillMaxSize()) {
        // 左侧组件（黑色区域）
        Column(
            modifier = Modifier
                .align(Alignment.CenterStart)
                .size(200.dp, 400.dp)
                .background(Color.Black)
                // 获取组件在父容器中的布局信息
                .onGloballyPositioned { coordinates ->
                    leftComponentRect.value = coordinates.boundsInParent()
                }
        ) {
            // 左侧组件内部内容
        }

        // 右侧组件（蓝色区域）
        Column(
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .size(200.dp, 400.dp)
                .background(Color.Blue)
        ) {
            // 右侧组件内部内容
        }

        // 红色叠加组件
        Box(
            modifier = Modifier
                // 根据左侧组件的位置计算偏移：x轴为左侧组件宽度+间距，y轴与左侧组件垂直居中
                .offset(
                    x = leftComponentRect.value.width + 16.dp,
                    y = leftComponentRect.value.top + (leftComponentRect.value.height - 100.dp) / 2
                )
                .size(150.dp, 100.dp)
                .background(Color.Red)
        ) {
            // 红色组件内部内容
        }
    }
}

关键点说明： #

• onGloballyPositioned会在组件布局完成后回调，能准确获取组件的实际位置（boundsInParent()返回相对于父容器的Rect）。
• offset modifier是视觉偏移，只会改变组件的显示位置，不会影响父容器或其他组件的布局测量，完美解决你之前遇到的Column包含红色组件导致尺寸变化的问题。
• 不需要使用BoxWithConstraints，因为我们需要的是具体子组件的布局信息，而非父容器的约束条件。

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