重叠两个 Box jetpack compose

Question

我正在尝试重叠两个 Box 或者在这种情况下使用 Row 可能更好。

我的设计是一个 Row 与另一个重叠，我把它包裹在一个 Column 上，对吗？

这是设计，我想要的是顶部的矩形与下面的矩形大小相同，然后将其移动一些像素，如您在图像中看到的那样，但它们应该具有宽度相同但高度不同。

层次结构是否可以:

Column 
  Box (the one of the top)
    Row
  Box (the one of the bottom)
    Row (inside there is text and it's all the same align)

Answer 1

为了让 Composables 重叠，您应该将它们放在同一个 Box 中。试试这个：

Box(modifier = Modifier.size(width = 300.dp, height = 100.dp)) {
    Row(modifier = Modifier
        .size(width = 200.dp, height = 50.dp)
        .background(color = Color.Blue)
        .align(Alignment.TopEnd)) {}
    Row(modifier = Modifier
        .size(width = 200.dp, height = 70.dp)
        .background(color = Color.Red)
        .align(Alignment.BottomStart)) {}
}

Answer 2

您可以通过多种方式实现这一点，

@Composable
fun BoxOverBox() {
    Box(
        modifier = Modifier.fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp)
                .zIndex(2f)
                .graphicsLayer {
                    translationX = -50f
                    translationY = 50f
                }
                .background(Color.Blue)
        )
    }
}

Answer 3

几天前我遇到过这个问题，我使用 ConstraintLayout.

解决了它

我必须做的是：

将 implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02" 添加到 build.gradle
将每个 Box 包装在 ConstraintLayout { .. }
在每个 Box 中添加一个 Modifier.constrainAs 以根据需要对齐 Top Bottom Start End。
如果您希望第一个框与第二个框相同 width 而无需对 dps 进行硬编码，您应该使用 width = Dimension.fillToConstraints

fillToConstraints - the layout will expand to fill the space defined by its constraints in that dimension.

没有hard-coding的基本示例：

ConstraintLayout() {
            val (title, description) = createRefs()
            Box(
                modifier = Modifier
                    .padding(start = 28.dp)
                    .background(color = Red)
                    .padding(
                        horizontal = 16.dp,
                    )
                    .constrainAs(title) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        width = Dimension.fillToConstraints
                    }
            ) {
                Text(text = "Hello World")
            }

            Box(
                modifier = Modifier
                    .padding(end = 4.dp)
                    .background(Color.Magenta)
                    .padding(bottom = 5.dp, start = 8.dp, end = 16.dp, top = 4.dp)
                    .constrainAs(description) {
                        top.linkTo(title.top, margin = 16.dp)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        bottom.linkTo(parent.bottom)
                    }
            ) {
                Text(text = "Skizo-ozᴉʞS rules")
            }
        }

现在你必须根据你的 UI 使用 padding 并调整它，结果是这样的：

Answer 4

这是使用 BoxWithConstraints 而不是使用固定宽度和高度的方法：

BoxWithConstraints(
    Modifier
        .background(color = Color.Blue)
        .padding(20.dp)) {

    val boxWidth = this.maxWidth
    Box(
        modifier = Modifier
            .width(boxWidth - 10.dp)
            .background(Color.Red)
    ) {
        Text(text = "Hello Android")
    }
    Column() {
        Spacer(modifier = Modifier
            .height(10.dp)
            .width(10.dp))
        Row( ) {
            Spacer(modifier = Modifier.width(10.dp))
            Box(
                modifier = Modifier
                    .width(boxWidth)
                    .zIndex(2f)
                    .background(Color.Yellow)
            ) {
                Text("aa", modifier = Modifier.background(color = Color.Green))
            }
        }
    }
}

Answer 5

我认为你必须使用“matchParentSize”修饰符，它在 BoxScope 中是可用的，我的意思是在 Box 可组合项中，当它第一次加入可组合项以将相同的大小应用于自身时，该修饰符会测量除自身之外的其他子项大小.

你可以在文档中看到这个修改器 https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope#(androidx.compose.ui.Modifier).matchParentSize()

重叠两个 Box jetpack compose

Overlap two Box jetpack compose

android

kotlin

android-jetpack

android-jetpack-compose