组合：在两个背景之间放置视图

Question

我试图弄清楚如何在 compose 中实现这一点，但完全不知道。 我想如图所示放置圆圈。 尝试使用Columns / Boxes没有任何成功。 将不胜感激任何提示。

Answer 1

您还可以使用负偏移 y，使视图显示在两个视图之间。

Column(modifier = Modifier.fillMaxSize()) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(color = Color.Blue)
    ) {}

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(color = Color.Green)
    ) {
        
        // red circle view
        Box(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .offset(y = (-40).dp)
                .size(80.dp)
                .clip(CircleShape)
                .background(color = Color.Red)
        )
    }
}

Answer 2

你可以这样做

@Composable
fun CircleInsideBoxes() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp) //your height for the container
    ) {
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(color = Color(0xFF3F48CC))
            )
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(color = Color(0xFF00A2E8))
            )
        }
         //Outside column inside parent Box
         Box(
              modifier = Modifier
                 .clip(CircleShape)
                 .background(color = Color(0xFFED1C24))
                 .size(80.dp) //your size for the circle
                 .align(Alignment.Center)
          )
      }
  }