그리드의 지연 목록

Grid 컴포저블은 구조적인 2차원 화면 레이아웃을 만듭니다. Grid는 명시적으로 정의된 트랙(행 및 열)과 간격을 UI의 기본 아키텍처로 사용하여 반응형 레이아웃 구조를 정의합니다.

Grid는 지연 로드 컨테이너가 아닌 구조적 컨테이너이므로 스크롤 시 항목을 재활용하지 않고 내부에 배치된 모든 요소를 명시적으로 정의해야 합니다. 따라서 Grid 내에서 대규모 데이터 세트나 동적 데이터 세트를 직접 렌더링하면 모든 항목이 동시에 구성되므로 성능 병목 현상이 발생할 수 있습니다.

구조화된 화면 레이아웃 내에 대규모 데이터 컬렉션을 표시하려면 LazyColumn 또는 LazyRow와 같은 지연 구성요소를 Grid 셀에 삽입합니다. 하지만 유연한 트랙 (1.fr과 같은 사양)은 하위 요소의 고유 크기를 쿼리합니다. SubcomposeLayout는 고유 측정 패스를 지원하지 않으므로 가변 트랙 내에 지연 목록을 배치하면 IllegalStateException 비정상 종료가 발생합니다. 가변 그리드 트랙 내에 지연 목록을 안전하게 배치하려면 GridTrackSize.MinMax 크기 조절 (예: minmax(0.dp, 1.fr))을 사용하여 고유 측정 패스를 우회해야 합니다.

권장사항

• 대규모 명시적 루프 대신 지연 목록 사용: 구조화된 Grid 내에 대규모 또는 동적 데이터 세트를 표시하려면 항목에 대규모 명시적 루프를 만드는 대신 특정 그리드 셀 내에 지연 구성요소 (일반적으로 LazyColumn 또는 LazyRow)를 삽입합니다. Grid는 항목을 재활용하지 않고 트랙이 1,000개로 제한되기 때문입니다.
• 지연 목록에 MinMax 트랙 크기 조정을 사용합니다. LazyColumn 및 LazyRow는 내장된 측정 패스를 지원하지 않으므로 (SubcomposeLayout 참고) 지연 구성요소를 호스팅하는 유연한 트랙에 GridTrackSize.MinMax를 사용하여 내장된 측정을 안전하게 우회합니다.

재료

• Grid: 명시적 행 및 열 트랙을 사용하여 구성된 2차원 그리드 구조에 항목을 배치하는 구성 가능한 레이아웃입니다.
• LazyColumn: 현재 화면에 표시되는 항목만 구성하고 재활용하는 세로 스크롤 목록입니다.
• GridTrackSize.MinMax: 런타임 측정 비정상 종료를 트리거하지 않고 지연 구성요소를 안전하게 호스팅하기 위해 유연한 경계 (min 및 max)를 정의하는 트랙 크기 속성입니다.
• gridItem: 하위 UI 요소를 Grid 내의 특정 셀 또는 이름이 지정된 영역에 할당하는 Compose Modifier 확장 프로그램입니다.

단계

시맨틱 영역 식별자를 정의하고, 지연 목록 호환성을 위해 minmax 크기 조정을 사용하여 그리드 트랙을 구성하고, 그리드 콘텐츠 영역 내에 LazyColumn를 삽입하여 화면 레이아웃을 구성합니다.

1. 그리드 트랙 및 이름이 지정된 영역 구성

화면 레이아웃의 고유한 영역을 나타내는 enum 클래스를 만들고 레이아웃 트랙과 이름이 지정된 영역의 GridConfigurationScope 람다를 정의합니다. 헤더 및 바닥글 행에 GridTrackSize.MaxContent를 사용하여 콘텐츠 크기에 맞추고, 지연 목록을 호스팅하는 콘텐츠 트랙에 minmax(0.dp, 1.fr)를 사용하여 지원되지 않는 고유 측정값을 쿼리하지 않고 유연한 공간을 할당합니다.

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}
GridByExamples.kt

2. 그리드에 정적 구성요소 배치

컴포저블에서 lazyConfig를 Grid 컨테이너에 전달합니다. content 람다 내에 정적 구성요소 (Header 및 Footer)를 배치하고 각각의 영역 식별자와 함께 Modifier.gridItem()를 사용하여 배치합니다.

3. 콘텐츠 영역에 LazyColumn 삽입

콘텐츠 셀에서 Modifier.gridItem(ScreenArea.Content)를 사용하여 LazyColumn를 삽입합니다. 콘텐츠 트랙이 1단계에서 minmax(0.dp, 1.fr)로 구성되었으므로 LazyColumn는 지원되지 않는 고유 측정기준을 쿼리하지 않고도 스크롤 시 항목을 안전하게 측정하고 재활용할 수 있습니다.

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}
GridByExamples.kt

결과

이제 화면 레이아웃은 Grid API를 활용하여 전체 2차원 페이지 구조를 정의하는 동시에 minmax 크기 조정을 통해 유연한 트랙에 LazyColumn를 삽입하여 목록 항목을 효율적으로 재활용하고 런타임 예외를 방지합니다.

추가 리소스

• Jetpack Compose의 그리드
• 컨테이너 속성 설정
• 지연 목록 및 지연 그리드