Compose布局阶段：如何实现子向父传数据以让父定位子组件

针对你需要父组件根据子/孙组件的测量结果调整子组件位置的需求，以下是几种简洁可行的实现方案：

1. 自定义Layout + 回调传递测量数据 #

利用Compose的Layout组件，在完成子元素测量后，通过回调将测量数据传递给父组件的状态，父组件再根据状态动态调整布局位置。

@Composable
fun ParentComponent() {
    var grandchildMeasuredSize by remember { mutableStateOf(IntSize.Zero) }

    CustomParentLayout(
        onGrandchildMeasured = { size -> grandchildMeasuredSize = size }
    ) {
        ChildComponent()
    }
}

@Composable
fun CustomParentLayout(
    onGrandchildMeasured: (IntSize) -> Unit,
    content: @Composable () -> Unit
) {
    Layout(content = content) { measurables, constraints ->
        // 测量所有子元素
        val placeables = measurables.map { it.measure(constraints) }

        // 从子元素中提取孙组件的测量数据（可根据实际结构调整）
        placeables.firstOrNull()?.let { placeable ->
            // 若孙组件是子组件的内部元素，可让ChildComponent暴露测量回调传递数据
            onGrandchildMeasured(placeable.size)
        }

        val parentWidth = constraints.maxWidth
        val parentHeight = constraints.maxHeight

        layout(parentWidth, parentHeight) {
            placeables.forEach { placeable ->
                // 根据孙组件尺寸动态调整子组件位置
                val offsetX = if (grandchildMeasuredSize.width > 100.dp.roundToPx()) {
                    parentWidth - placeable.width
                } else {
                    0
                }
                placeable.place(offsetX, 0)
            }
        }
    }
}

@Composable
fun ChildComponent() {
    Box(modifier = Modifier.size(200.dp)) {
        Text(text = "孙组件", modifier = Modifier.size(150.dp))
    }
}

这种方案完全贴合Compose的状态驱动思想，测量逻辑和布局逻辑分离，代码清晰易维护。

2. 带状态的ParentDataModifier #

针对你提到的ParentDataModifier局限，可以让它携带一个可变状态对象，子组件测量后更新该状态，父组件在布局阶段读取状态数据。

class MeasuredStateModifier(
    val measuredSize: MutableState<IntSize>
) : ParentDataModifier {
    override fun Density.modifyParentData(parentData: Any?): Any? = measuredSize
}

fun Modifier.measuredState(state: MutableState<IntSize>) = this.then(MeasuredStateModifier(state))

@Composable
fun StatefulParentLayout(content: @Composable () -> Unit) {
    Layout(content) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            val sizeState = measurable.parentData as? MutableState<IntSize>
            val placeable = measurable.measure(constraints)
            // 更新状态为测量后的尺寸
            sizeState?.value = placeable.size
            placeable
        }

        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEachIndexed { index, placeable ->
                val sizeState = measurables[index].parentData as? MutableState<IntSize>
                val offsetX = sizeState?.value?.let {
                    if (it.width > 100.dp.roundToPx()) constraints.maxWidth - placeable.width else 0
                } ?: 0
                placeable.place(offsetX, 0)
            }
        }
    }
}

// 使用示例
@Composable
fun StatefulUsage() {
    val grandchildSizeState = remember { mutableStateOf(IntSize.Zero) }
    StatefulParentLayout {
        ChildComponent(Modifier.measuredState(grandchildSizeState))
    }
}

这种方案复用了ParentDataModifier的传递机制，通过状态对象实现了测量后的数据动态传递，避免了静态数据的限制。

3. 嵌套组件的回调穿透 #

如果数据来自孙组件，可以通过逐层回调的方式，让孙组件的测量数据穿透到父组件：

@Composable
fun ChildComponent(onGrandchildMeasured: (IntSize) -> Unit) {
    Layout(content = {
        Text(text = "孙组件", modifier = Modifier.size(150.dp))
    }) { measurables, constraints ->
        val grandchildPlaceable = measurables.first().measure(constraints)
        // 将孙组件测量数据传递给父组件
        onGrandchildMeasured(grandchildPlaceable.size)
        layout(grandchildPlaceable.width, grandchildPlaceable.height) {
            grandchildPlaceable.place(0, 0)
        }
    }
}

@Composable
fun ParentComponent() {
    var grandchildSize by remember { mutableStateOf(IntSize.Zero) }

    Box(modifier = Modifier.fillMaxSize()) {
        ChildComponent(onGrandchildMeasured = { grandchildSize = it })
        // 根据孙组件尺寸调整其他元素位置
        Text(
            text = "跟随孙组件移动",
            modifier = Modifier.offset(
                x = grandchildSize.width.dp,
                y = grandchildSize.height.dp
            )
        )
    }
}

这种方式适合多层嵌套的场景，遵循单向数据流原则，数据传递路径清晰。

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