Jetpack Compose：父容器含偏移组件时如何让高度适配文本内容

问题根源 #

你当前使用的Modifier.offset(x = 50.dp, y = -88.dp)属于布局阶段偏移，仅修改Image的绘制位置，Image本身的原始尺寸仍然会参与父Box的测量计算，因此父容器会被Image的原始大小撑开，无法仅适配内部文本的高度。

修复方案 #

你可以任选以下两种方式修改Image的修饰符，让Image不参与父容器的测量，仅在绘制阶段偏移到指定位置：

方案1：自定义layout修饰符（兼容性更好） #

Box(
    modifier = Modifier
        .padding(10.dp)
        .background(Color.Cyan, shape = RoundedCornerShape(8.dp))
        .clickable { }
) {
    Image(
        modifier = Modifier
            .width(224.dp)
            .align(alignment = Alignment.TopEnd)
            // 替换原有offset，自定义layout让Image不占用父容器布局空间
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                // 测量阶段返回宽高为0，不影响父容器尺寸计算
                layout(0, 0) {
                    // 绘制阶段偏移到指定位置
                    placeable.placeRelative(
                        x = 50.dp.roundToPx(),
                        y = (-88).dp.roundToPx()
                    )
                }
            },
        painter = painterResource(id = R.drawable.ic_pray),
        contentDescription = null,
    )
    Box(...)
}

方案2：使用graphicsLayer做绘制偏移 #

Image(
    modifier = Modifier
        .width(224.dp)
        .align(alignment = Alignment.TopEnd)
        // 用绘制阶段的偏移替代原有布局偏移，不会影响测量
        .graphicsLayer {
            translationX = 50.dp.toPx()
            translationY = (-88).dp.toPx()
        },
    painter = painterResource(id = R.drawable.ic_pray),
    contentDescription = null,
)

两种方案都可以实现父Box高度仅适配内部文本内容的需求，如果需要隐藏Image超出父容器的部分，给父Box加上Modifier.clipToBounds()即可。

内容的提问来源于stack exchange，提问作者Mia loha.dev