重叠两个盒子喷气背包组成

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。

\n

我必须做的是：

\n

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

\n

\n

fillToConstraints - 布局将扩展以填充由该维度中的约束定义的空间。

\n

\n

没有硬编码的基本示例：

\n

ConstraintLayout() {\n            val (title, description) = createRefs()\n            Box(\n                modifier = Modifier\n                    .padding(start = 28.dp)\n                    .background(color = Red)\n                    .padding(\n                        horizontal = 16.dp,\n                    )\n                    .constrainAs(title) {\n                        top.linkTo(parent.top)\n                        start.linkTo(parent.start)\n                        end.linkTo(parent.end)\n                        width = Dimension.fillToConstraints\n                    }\n            ) {\n                Text(text = "Hello World")\n            }\n\n            Box(\n                modifier = Modifier\n                    .padding(end = 4.dp)\n                    .background(Color.Magenta)\n                    .padding(bottom = 5.dp, start = 8.dp, end = 16.dp, top = 4.dp)\n                    .constrainAs(description) {\n                        top.linkTo(title.top, margin = 16.dp)\n                        start.linkTo(parent.start)\n                        end.linkTo(parent.end)\n                        bottom.linkTo(parent.bottom)\n                    }\n            ) {\n                Text(text = "Skizo-oz\xe1\xb4\x89\xca\x9eS rules")\n            }\n        }\n

\n

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

\n

\n

Answer 2

这是使用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 3

为了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)) {}
}