Grid 컴포저블은 구조적인 2차원 화면 레이아웃을 만듭니다.
Grid는 명시적으로 정의된 트랙(행과 열)과 간격을 UI의 기본 아키텍처로 사용하여 반응형 레이아웃 구조를 정의합니다.
Grid는 지연 로딩 컨테이너가 아닌 구조적 컨테이너이므로 스크롤 시 항목을 재활용하지 않고도 내부에 배치된 모든 요소를 명시적으로 정의해야 합니다.
따라서 Grid 내에서 대규모 또는 동적 데이터 세트를 직접 렌더링하면 모든 항목이 동시에 구성되므로 성능 병목 현상이 발생할 수 있습니다.
구조화된 화면 레이아웃 내에 대규모 데이터 컬렉션을 표시하려면 Grid 셀에 LazyColumn 또는 LazyRow과 같은 지연 로드 구성요소를 삽입하세요.
하지만 1.fr과 같은 사양을 사용하는 유연한 트랙은 하위 요소의 내장 크기를 쿼리합니다. SubcomposeLayout는 내장 측정 패스를 지원하지 않으므로 유연한 트랙 내에 지연 목록을 배치하면 IllegalStateException 비정상 종료가 발생합니다. 유연한 그리드 트랙 내부에 지연 로딩 목록을 안전하게 배치하려면 GridTrackSize.MinMax 크기 조정 (예: minmax(0.dp, 1.fr))을 사용하여 내장 측정 패스를 우회해야 합니다.
LazyColumn가 있는 구조적 화면 레이아웃권장사항
- 대규모 명시적 루프 대신 지연 목록 사용: 구조화된
Grid내에 대규모 또는 동적 데이터 세트를 표시하려면Grid는 항목을 재활용하지 않고 트랙이 1,000개로 제한되므로 항목에 대해 대규모 명시적 루프를 만드는 대신 지연 구성요소 (일반적으로LazyColumn또는LazyRow)를 특정 그리드 셀 내에 삽입합니다. - 지연 목록에
MinMax트랙 크기 조정 사용:LazyColumn및LazyRow는 내장 측정 패스를 지원하지 않으므로 (SubcomposeLayout참고) 지연 구성요소를 호스팅하는 유연한 트랙에서GridTrackSize.MinMax를 사용하여 내장 측정을 안전하게 우회하세요.
재료
Grid: 명시적 행 및 열 트랙을 사용하여 구성된 2차원 그리드 구조에 항목을 배치하는 컴포저블 레이아웃입니다.LazyColumn: 현재 화면에 표시되는 항목만 구성하고 재활용하는 세로 스크롤 목록입니다.GridTrackSize.MinMax: 런타임 측정 비정상 종료를 트리거하지 않고 지연 로드 구성요소를 안전하게 호스팅하기 위해 유연한 경계 (min및max)를 정의하는 트랙 크기 조정 속성입니다.gridItem:Grid내의 특정 셀 또는 명명된 영역에 하위 UI 요소를 할당하는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) }
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)) } } } }
결과
이제 화면 레이아웃은 Grid API를 사용하여 전체 2차원 페이지 구조를 정의하는 동시에 minmax 크기 조정을 사용하여 유연한 트랙에 LazyColumn을 삽입하여 목록 항목을 효율적으로 재활용하고 런타임 예외를 방지합니다.