[Compose] LazyListScope

 

RecyclerView 대신 Compose에서는 Lazy Lists를 사용합니다.

LazyColumn, LazyRow, LazyGrid는 대량의 데이터를 효율적으로 표시하는 데 특화된 컴포넌트입니다.

 

LazyListScope

LazyListScope는 LazyColumn과 LazyRow에서 항목을 정의할 때 사용하는 DSL(도메인 특정 언어)입니다.

스코프는 리스트의 항목을 추가하고 구성할 수 있는 다양한 함수들을 제공합니다.

이를 통해 코드의 가독성을 높이고, 리스트 항목을 더 쉽게 관리할 수 있습니다.

 

@LazyScopeMarker
@JvmDefaultWithCompatibility
interface LazyListScope {
    fun item(
        key: Any? = null,
        contentType: Any? = null,
        content: @Composable LazyItemScope.() -> Unit
    ) {
        error("The method is not implemented")
    }

    fun items(
        count: Int,
        key: ((index: Int) -> Any)? = null,
        contentType: (index: Int) -> Any? = { null },
        itemContent: @Composable LazyItemScope.(index: Int) -> Unit
    ) {
        error("The method is not implemented")
    }
		
   @ExperimentalFoundationApi
    fun stickyHeader(
        key: Any? = null,
        contentType: Any? = null,
        content: @Composable LazyItemScope.() -> Unit
    )
}

 

LazyListScope는 다음과 같은 기능을 제공합니다.

 

items

리스트 항목을 정의합니다.

데이터 리스트를 전달하고, 각 항목을 어떻게 표시할 지 지정합니다.

items(yourDataList) { item ->
    Text(text = item)
}

 

item

이 함수는 특정 항목을 추가할 때 사용합니다.

item {
    Text(text = "Header", fontWeight = FontWeight.Bold)
}

 

itemsIndexed

각 항목의 인덱스를 함께 사용할 수 있습니다.

이 기능은 항목의 순서난 위치에 따라 다르게 표시할 때 유용합니다.

itemsIndexed(yourDataList) { index, item ->
    Text(text = "$index: $item")
}

 

LazyColumn() {
    itemsIndexed(
        items = books,
        key = { index, book ->
            book.id
        }
    ) { index, book ->
        Log.d("TEST", index.toString())
    }
}

DiffUtil 처럼 LazyColumn, LazyRow에서도 key 파라미터를 통해 각 아이템의 고유 키를 설정하여 값 변경 시 해당하는 데이터만 Recomposition하도록 할 수 있습니다.

 

stickyHeader

스크롤 시 고정되는 헤더를 추가할 수 있습니다.

이 기능은 섹션 헤더 등을 만들 때 유용합니다.

stickyHeader {
    Text(text = "Sticky Header", fontSize = 20.sp, fontWeight = FontWeight.Bold)
}

 

data class Item(val id: Int, val name: String, val category: String)

val itemsList = listOf(
    Item(1, "Apple", "Fruit"),
    Item(2, "Banana", "Fruit"),
    Item(3, "Carrot", "Vegetable"),
    Item(4, "Broccoli", "Vegetable"),
    Item(5, "Chicken", "Meat"),
    Item(6, "Beef", "Meat"),
)

@Composable
fun StickyHeaderLazyColumn() {
    LazyColumn {
        items(itemsList.groupBy { it.category }.toList()) { (category, items) ->
            stickyHeader {
                Text(text = category)
            }
            items(items) { item ->
                Text(text = item.name)
            }
        }
    }
}