이 페이지는 Cloud Translation API를 통해 번역되었습니다.

스크롤 가능한 그리드 만들기

지연 로드 그리드를 사용하여 대용량 데이터 세트와 동적 콘텐츠를 관리하여 앱 성능을 개선할 수 있습니다. 지연 그리드 컴포저블을 사용하면 여러 열 또는 행에 걸쳐 스크롤 가능한 컨테이너에 항목을 표시할 수 있습니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

그리드 방향 결정

LazyHorizontalGrid 및 LazyVerticalGrid 컴포저블은 그리드에 항목을 표시하도록 지원합니다. 지연 세로 그리드는 여러 열에 걸쳐 세로로 스크롤 가능한 컨테이너에 항목을 표시하는 반면, 지연 가로 그리드는 가로축을 중심으로 동일하게 동작합니다.

스크롤 가능한 그리드 만들기

다음 코드는 3개의 열이 있는 가로 스크롤 그리드를 만듭니다.

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}LazyListSnippets.kt

코드 관련 핵심 사항

LazyHorizontalGrid 컴포저블은 그리드의 가로 방향을 결정합니다.
- 세로 그리드를 만들려면 대신 LazyVerticalGrid을 사용하세요.
rows 속성은 그리드 콘텐츠를 배치하는 방법을 지정합니다.
- 세로 그리드의 경우 columns 속성을 사용하여 배열을 지정합니다.
items(itemsList): LazyHorizontalGrid에 itemsList를 추가합니다. 람다 함수는 각 항목에 대해 Text 컴포저블을 렌더링하고 텍스트를 항목 설명으로 설정합니다.
item()는 LazyHorizontalGrid에 단일 항목을 추가하는 반면 람다는 items()와 유사한 방식으로 단일 Text 컴포저블을 렌더링합니다.
GridCells.Fixed: 행 또는 열 수를 정의합니다.
최대한 많은 행으로 그리드를 만들려면 GridCells.Adaptive를 사용하여 행 수를 설정하세요.

다음 코드에서 20.dp 값은 모든 열이 20.dp 이상이고 모든 열의 너비가 동일하다고 지정합니다. 화면의 너비가 88.dp이면 열이 4개 있고 각각 22.dp입니다.