Jetpack Compose 如何让偏移到父布局外的Image组件可见

问题原因 #

Jetpack Compose 中的Card组件默认会按照自身的形状裁剪内部所有内容，偏移出Card边界的图片部分自然会被裁切掉无法显示。

解决方案 #

只需要给Card组件添加clip = false参数，关闭默认的内容裁剪逻辑即可：

Card(
    shape = RoundedCornerShape(8.dp),
    modifier = Modifier.padding(),
    backgroundColor = Color.Cyan,
    onClick = {},
    clip = false // 新增这行，关闭内容裁剪
) {
    Box(modifier = Modifier.wrapContentHeight()) {

        Image(
            modifier = Modifier
                .width(250.dp)
                .align(alignment = Alignment.TopEnd)
                .offset(y = -75.dp, x = 50.dp),
            painter = painterResource(id = R.drawable.ic_pray),
            contentDescription = null,
        )
        Column(

        ) {}
    }
}

补充说明 #

• 关闭裁剪后不会影响Card本身的圆角、背景色、点击效果等原有属性，仅不对内部超出边界的内容做裁剪处理
• 如果是使用Material3版本的Card，参数配置逻辑完全一致，同样添加clip = false即可生效

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