如何在 Jetpack Compose 中进行这样的布局答案

【问题标题】：How to have a layout like this in Jetpack Compose如何在 Jetpack Compose 中进行这样的布局
【发布时间】：2021-08-24 19:12:20
【问题描述】：

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

【问题讨论】：

标签： android android-jetpack-compose

【解决方案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)

    }
}

【讨论】：

【解决方案2】：

您可以使用Card 进行主视图布局。

要像这样放置图标，您需要将其与Card 一起放入一个框中，将Alignment.BottomCenter 对齐到图像并添加填充。

为了使图片位于您的文字下方，我添加了Spacer，其大小根据图片大小计算。

@Composable
fun TestView() {
    CompositionLocalProvider(
        LocalContentColor provides Color.White
    ) {
        Column {
            LazyRow {
                items(10) {
                    Item()
                }
            }
            Box(Modifier.fillMaxWidth().background(Color.DarkGray)) {
                Text("next view")
            }
        }

    }
}

@Composable
fun Item() {
    Box(
        Modifier
            .padding(10.dp)
    ) {
        val imagePainter = painterResource(id = R.drawable.test2)
        val imageOffset = 20.dp
        Card(
            shape = RoundedCornerShape(0.dp),
            backgroundColor = Color.DarkGray,
            modifier = Modifier
                .padding(bottom = imageOffset)
                .width(200.dp)
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.padding(20.dp)
            ) {
                Text(
                    "Title",
                    modifier = Modifier.align(Alignment.Start)
                )
                Spacer(modifier = Modifier.size(15.dp))
                Text("PM2.5")
                Text(
                    "10",
                    fontSize = 35.sp,
                )
                Text("m/s")
                Spacer(modifier = Modifier.size(15.dp))
                Text(
                    "Very Good",
                    fontSize = 25.sp,
                )
                Spacer(
                    modifier = Modifier
                        .size(
                            with(LocalDensity.current) { imagePainter.intrinsicSize.height.toDp() - imageOffset }
                        )
                )
            }
        }
        Image(
            painter = imagePainter,
            contentDescription = "",
            Modifier
                .align(Alignment.BottomCenter)
        )
    }
}

结果：

【讨论】：