Constraint Layout

@Composable
fun ConstraintLayoutEx() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        // createRefs()를 이용해 Box들의 레퍼런스를 가져옴
        // createRefs()는 여러 개의 레퍼런스(16개 까지)를 리턴하기 때문에 destribution으로 분해
        val (redBox, magentaBox, greenBox, yellowBox) = createRefs()

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Red)
            .constrainAs(redBox) {
                // bottom-end에 연결. 각각 Margin 설정
                bottom.linkTo(parent.bottom, margin = 8.dp)
                end.linkTo(parent.end, margin = 4.dp)
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Magenta)
            .constrainAs(magentaBox) {
                // start-end에 연결
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Green)
            .constrainAs(greenBox) {
                // 정가운데 연결
//                start.linkTo(parent.start)
//                end.linkTo(parent.end)
//                top.linkTo(parent.top)
//                bottom.linkTo(parent.bottom)
                centerTo(parent)
//                centerHorizontallyTo(parent)  // 수평
//                centerVerticallyTo(parent)    // 수직
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Yellow)
            .constrainAs(yellowBox) {
                // 마젠타 박스 오른쪽 대각선 아래
                start.linkTo(magentaBox.end)
                top.linkTo(magentaBox.bottom)
            }
        )
    }
}