[Compose] Column Row Box 에 대해 알아보자.

Compose에서 쓰이는 기존 레이아웃 요소에는 Column Row Box 3가지가 있다.

각각 어떻게 쓰이는지 알아보자.

Column

column의 하위 요소는 세로로 그려진다.
이 코드를 봐보자.

   Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp)
        ) {
            Text(text = "hello.")
            Text(text = name)

        }

이 코드를 preview로 봐보면

이러한 상태가 되며 각 Text가 세로로 그려진다.

Row

row의 하위 요소는 가로로 그려진다.
이 코드를 봐보자.

   Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp)
        ) {
            Text(text = "hello.")
            Text(text = name)

        }

각 Text가 가로로 그려지는 것을 볼 수 있다.

Box

Box는 하위 요소가 겹치면서 그려진다.
이 코드를 봐보자

     Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp)
        ) {
            Text(text = "hello.")
            Text(text = name)

        }

각 Text가 겹쳐서 나오는 것을 볼 수 있다.

 

이렇게 레이아웃 요소에 대해 알아봤다.

이것을 어떻게 활용할지는 개발자의 몫인 것 같다.