Box 레이아웃은 자식들을 위로 중첩해서 쌓아 올리는 레이아웃입니다.

자식들이 쌓이는 순서는 Box 선언 안에서 먼저 선언한 자식들이 밑에 깔리게 되고 나중에 선언한 자식들이 위에 쌓이게 됩니다.

@Composable
fun MainScreen() {
    Box {
        TextCell(text = "1")
        TextCell(text = "2")
        TextCell(text = "3")
    }
}

@Composable
fun TextCell(text: String, modifier: Modifier = Modifier) {
    val cellModifier = Modifier
        .size(75.dp)
        .padding(4.dp)
        .border(width = 4.dp, color = Color.Black)

    Text(
        text = text,
        modifier = cellModifier.then(modifier),
        fontSize = 50.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center
    )
}

Box 정렬

Box 컴포저블은 contentAlignment 단 하나의 정렬 파라미터를 제공합니다. contentAlignment 파라미터를 사용해서 Box 콘텐츠 영역 안에 있는 자식 그룹의 위치를 설정할 수 있습니다.

예시

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier.size(225.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        TextCell(text = "1")
    }
}

Scope Modifier

BoxScope 모디파이어 함수를 제공해서 각 자식의 동작이나 형태를 변경할 수 있습니다.

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .size(width = 270.dp, height = 150.dp)
            .padding(5.dp),
    ) {
        Text("TopStart", modifier = Modifier.align(Alignment.TopStart))
        Text("TopCenter", modifier = Modifier.align(Alignment.TopCenter))
        Text("TopEnd", modifier = Modifier.align(Alignment.TopEnd))
        Text("CenterStart", modifier = Modifier.align(Alignment.CenterStart))
        Text("Center", modifier = Modifier.align(Alignment.Center))
        Text("CenterEnd", modifier = Modifier.align(Alignment.CenterEnd))
        Text("BottomStart", modifier = Modifier.align(Alignment.BottomStart))
        Text("BottomCenter", modifier = Modifier.align(Alignment.BottomCenter))
        Text("BottomEnd", modifier = Modifier.align(Alignment.BottomEnd))
    }
}

Clip Modifier

clip 모디파이어를 사용하면 컴포저블을 특정한 형태로 렌더링되도록 할 수 있습니다.

컴포저블의 형태를 정의할 때는 clip() 모디파이어를 호출하고 Shape 값을 전달합니다.

(Shape: RectangleShape, CircleShape, RoundedCornerShape, CutCornerShape)

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .size(150.dp)
            .clip(CutCornerShape(15.dp)) //or CircleShape, RoundedCornerShape
            .background(Color.Black)
    )
}