[Android] Compose - layout error

Compose 레이아웃 관련 에러

LazyHorizontalGrid를 사용하면서 java.lang.IllegalArgumentException: LazyHorizontalGrid's height should be bound by parent. 에러를 발견하였다.

 

에러내용은 해당 컴포즈 UI가 부모 레이아웃에 높이에 맞지 않다는 내용이였다.

 

이 에러가 발생하게 된 계기가

  Column(modifier.verticalScroll(rememberScrollState()) // 이 부분) {
        // Spacer를 통해 공백 생성
        Spacer(Modifier.height(16.dp))
        // 검색 창
        SearchBar(Modifier.padding(horizontal = 16.dp))
        // 첫번째 섹션
        HomeSection(title = R.string.align_your_body) {
            AlignYourBodyRow()
        }
        // 두번째 섹션
        HomeSection(title = R.string.favorite_collection) {
            FavoriteCollectionsGrid()
        }
        Spacer(Modifier.height(16.dp))
    }

 

맨 윗부분에 Column에 스크롤을 주기 위해서였다.

스크롤을 주기 전까지는 정상 동작을 하였지만, 저 코드를 추가하니 에러가 발생했다.

 

https://stackoverflow.com/questions/72661805/lazyhorizontalgrid-inside-lazycolumn 에 의하면 LazyList 또는 Column의 콘텐츠에 수직 스크롤이 있는 경우 의도적으로 예외가 발생한다고 한다. 스크롤이 발생하는 부분에 영역이 잡히지 않아서 그런가??? (자세하게 더 알아봐야할 것 같다)

 

간단한 해결 방법으로는 LazyList영역에 높이를 직접 지정하거나 Modifier.scroll()을 통해 해결 할 수 있다고 한다.

 

나는 우선 높이를 직접 지정하는 형식으로 시도해봤다.

 

// 수평 그리드 형태의 리사이클러뷰
    LazyHorizontalGrid(
        // row의 갯수를 얼마만큼 할 것인지 지정
        rows = GridCells.Fixed(2),
        modifier = modifier.height(176.dp),
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(favoriteCollectionsData) { item ->
            FavoriteCollectionCard(item.drawable, item.text, modifier = Modifier.height(80.dp))
        }
    }

 

오류는 사라졌지만, 완벽하게 이해를 하진 못한 것 같다....

아직 컴포즈를 공부 시작한 지 얼마 안됐으니.. 부딪혀가며 알아보자..