搭接两箱喷气背包组合 [英] Overlap two Box jetpack compose

问题描述

我正在尝试重叠两个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)

推荐答案

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

这篇关于搭接两箱喷气背包组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！