Jetpack Compose:使父级外部的偏移图像可见

Jetpack Compose: Make offset image outside parent visible

我在带有背景色的卡片中添加了一张图像,我希望我的图像的某些部分溢出容器并可见。我使用 offset 来偏移图像,但我找不到使它可见的方法。

这是我的代码:

Card(
    shape = RoundedCornerShape(8.dp),
    modifier = Modifier.padding(),
    backgroundColor = Color.Cyan,
    onClick = {},
) {
    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 基于 Material 表面,using Modifier.clip 会阻止显示偏移视图。

如果您需要保持 Card 高度,您可以将图像放在 Card 之外的 Box 中:

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

否则,您可以先跳过使用 Card,然后使用 Modifier.background:

将背景和形状设置为您的 Box
Box(
    modifier = Modifier
        .padding(10.dp)
        .background(Color.Cyan, shape = RoundedCornerShape(8.dp))
) {
    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.my_image),
            contentDescription = null,
        )
        Column(

        ) {}
    }
}