android - 重叠两个 Box jetpack 组合

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

几天前我遇到过这个问题，我使用 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.

没有硬编码的基本示例:

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")
            }
        }

现在你必须玩 padding根据您的 UI 并对其进行调整，结果是这样的: