如何将悬挂图标放置在卡片可组合项的右上角

Question

如何在Card可组合项上实现下图所示的效果，X例如图标挂在右上角？我不想要圆角，也不想要黑色背景，只想要挂在右上角的图标Card。尽管多次尝试，我还是无法实现这一目标。

SO 上的原始代码

Box(
    modifier = Modifier
        .background(LightGray)
        .padding(16.dp)
        .size(88.dp),
    contentAlignment = Alignment.TopEnd
) {
    Image(
        painter = painterResource(
            id = R.drawable.ic_launcher_foreground,
        ),
        contentDescription = "",
        modifier = Modifier
            .align(Alignment.Center)
            .clip(RoundedCornerShape(16.dp))
            .background(Black)
            .size(80.dp),
        contentScale = ContentScale.Crop,
    )
    IconButton(
        onClick = {},
        modifier = Modifier
            .clip(CircleShape)
            .background(White)
            .align(Alignment.TopEnd)
            .size(16.dp)
    ) {
        Icon(
            imageVector = Icons.Rounded.Close,
            contentDescription = "",
        )
    }
}

可能的代码结构？

Box(...) {

    Card(...) {
        Image(...) {
        }
    }
    
    IconButton(...) {
        Icon(...) {
        }
    }
        
}

Answer 1

您可以通过多种方式做到这一点。其中一种是使用 Modifier.offset{}，另一种是使用 Modifier.graphicsLayer{} 并设置 TranslationX 和 TranslationY 参数，或者Layout基于图像可组合项放置图标。

@Composable
private fun MyIconBox() {

    val iconSize = 24.dp
    val offsetInPx = LocalDensity.current.run { (iconSize / 2).roundToPx() }

    Box(modifier = Modifier.padding((iconSize / 2))) {

        Card {
            Image(
                modifier = Modifier.size(200.dp),
                painter = painterResource(id = R.drawable.landscape4),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
        }

        IconButton(
            onClick = {},
            modifier = Modifier
                .offset {
                    IntOffset(x = +offsetInPx, y = -offsetInPx)
                }
                .clip(CircleShape)
                .background(White)
                .size(iconSize)
                .align(Alignment.TopEnd)
        ) {
            Icon(
                imageVector = Icons.Rounded.Close,
                contentDescription = "",
            )
        }
    }
}

结果