[Compose] 빈공간 없는 GridList 사용하기

- 기존에 아래와 같은 Vertical Grid Composable을 사용하고 있었다.

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    contentPadding = PaddingValues(8.dp),
    modifier = Modifier.fillMaxSize()
) {
    items(filteredList) { item ->
        MemoItemView(item, onClick = {
            selectedMemo = item
            coroutineScope.launch { sheetState.show() }
        }, onEdit = {
            onEdit.invoke(it)
        }, onDelete = {
            memoViewModel.deleteData(item)
        })
    }
}

 

- 그런데 아이템 뷰의 높이가 다르면 다음처럼 보기 좋지 않은 여백이 발생한다.

- 이 경우에는 LazyVerticalStaggeredGrid 컴포저블을 사용해 주면 된다. 

 

- 화면에 현재 표시되는 항목만 구성하고 배치하는 수직 계단식 그리드 레이아웃으로서 빈 공간을 채워준다.

 

- colums 파라미터에서 StaggeredGridCells로 같이 수정해주어야한다.

LazyVerticalStaggeredGrid (
    columns = StaggeredGridCells.Fixed(2),
    contentPadding = PaddingValues(8.dp),
    modifier = Modifier.fillMaxSize()
) {
    items(filteredList) { item ->
        MemoItemView(item, onClick = {
            selectedMemo = item
            coroutineScope.launch { sheetState.show() }
        }, onEdit = {
            onEdit.invoke(it)
        }, onDelete = {
            memoViewModel.deleteData(item)
        })
    }
}