android - 如何在 Jetpack Compose 中拥有这样的布局

Question

我想在 Jetpack Compose 中使用此布局。如何将图像放置在卡片底部并使其稍微超出卡片边框？另外如何确保上面的内容不会与图像冲突，因为上面的内容可能会更长。非常感谢。

Answer 1

一种简单的方法是使用 Box 并将 Offset 应用于 Image

Box() {
    val overlayBoxHeight = 40.dp
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
       //...
    }
    Image(
        painterResource(id = R.drawable.xxxx),
        contentDescription = "",
        modifier = Modifier
            .align(BottomCenter)
            .offset(x = 0.dp, y =  overlayBoxHeight )
    )
}

如果您想计算偏移量，可以使用 Layout 可组合项。

类似于:

Layout( content = {
    Card(
        elevation = 10.dp,
        modifier = Modifier
            .layoutId("card")
            .fillMaxWidth()
            .height(300.dp)
    ) {
        //...
    }
    Image(
        painterResource(id = R.drawable.conero),
        contentDescription = "",
        modifier = Modifier
            .layoutId("image")
    )

}){ measurables, incomingConstraints ->

    val constraints = incomingConstraints.copy(minWidth = 0, minHeight = 0)
    val cardPlaceable =
        measurables.find { it.layoutId == "card" }?.measure(constraints)
    val imagePlaceable =
        measurables.find { it.layoutId == "image" }?.measure(constraints)

    //align the icon on the top/end edge
    layout(width = widthOrZero(cardPlaceable),
        height = heightOrZero(cardPlaceable)+ heightOrZero(imagePlaceable)/2){

        cardPlaceable?.placeRelative(0, 0)
        imagePlaceable?.placeRelative(widthOrZero(cardPlaceable)/2 - widthOrZero(imagePlaceable)/2,
            heightOrZero(cardPlaceable) - heightOrZero(imagePlaceable)/2)

    }
}