[Jetpack Compose] Row와 Column을 이용해서 Grid 화면 만들기

Row와 Column을 학습하기 위해 이 두가지를 사용해서 Grid 화면을 만들어 보겠습니다.

다음과 같은 화면을 만들어보겠습니다.

먼저 박스를 생성합니다.

@Composable
fun CreateBox() {
    val red = Random.nextInt(256)
    val green = Random.nextInt(256)
    val blue = Random.nextInt(256)
    val randomColor = Color(red, green, blue)

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(randomColor)
    ) {

    }
}

그 다음 Grid View처럼 나타나도록 GridView() Composable 함수를 작성합니다.

@Composable
fun GridView() {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            for(i in 0..2) CreateBox()
        }
        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            for(i in 0..2) CreateBox()
        }
        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            for(i in 0..2) CreateBox()
        }
    }
}

여기서 중요한 점은 다음과 같습니다.

Modifire.fillMaxWidth()
만약 fillMaxSize()를 사용한다면 다른 Row까지 가려져 화면이 보이지 않게 됩니다.
그래서 Row의 가로 행만 모두 차지하도록 위와 같이 작성합니다.



감사합니다.