Android 如何在Jetpack Compose中使用Box Composable来实现这种布局

发布于02月10日

正如您所看到的布局，我希望将较小的框覆盖在较大框的边缘上. 我试着自己实现它，但我所能做的就是将较小的覆盖在较大的边缘上，而不是在边缘之上.

我试图这样实现它，但我想我只是没有在偏移量修饰符中给出正确的参数.

Box {
        Card(
            modifier= Modifier
                .fillMaxWidth()
                .height(300.dp)
        ){

        }
        Box(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(Color.Blue)
                .align(Alignment.TopStart)
                .offset(x=0.dp ,y=40.dp)
        )
    }

推荐答案

作为Box的替代方法，您可以使用自定义布局

@Composable
fun OverlappingBoxes(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(
        modifier = modifier,
        content = content,
    ) { measurables, constraints ->
        val largeBox = measurables[0]
        val smallBox = measurables[1]
        val looseConstraints = constraints.copy(
            minWidth = 0,
            minHeight = 0,
        )
        val largePlaceable = largeBox.measure(looseConstraints)
        val smallPlaceable = smallBox.measure(looseConstraints)
        layout(
            width = constraints.maxWidth,
            height = largePlaceable.height + smallPlaceable.height / 2,
        ) {
            largePlaceable.placeRelative(
                x = 0,
                y = 0,
            )
            smallPlaceable.placeRelative(
                x = - smallPlaceable.width / 2, // overlap by exactly half the sise of second box x axis wise
                y = largePlaceable.height / 2 - smallPlaceable.height / 2 //center with y axis
            )
        }
    }
}

@Composable
fun BoxOverlap(
    modifier: Modifier = Modifier,
) {
    OverlappingBoxes(modifier = modifier.size(300.dp)) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .background(Color.Green)
        ) {
        }

        Box(
            modifier = Modifier
                .size(100.dp)
                .clip(RoundedCornerShape(16.dp))
                .background(Color.Blue)
        ) {

        }
    }
}

如果您希望第二个框偏移基于百分比

val percentageFromTop = 0.3f // 30% from the top
val yOffset = (largePlaceable.height * percentageFromTop).roundToInt()
smallPlaceable.placeRelative(x = - smallPlaceable.width / 2,y = yOffset - smallPlaceable.height / 2
            )

在使用约束布局的情况下还有其他答案Overlap two Box jetpack compose.但是，如果您想使用百分比，您可以使用自定义布局