[Compose Study] LazyColumn

* LazyColumn은 기존의 RecyclerView, ListView와 비슷한 것 같다.

* lazyColumn은 세로 스크롤이고, 가로스크롤이 가능한 lazyRow, lazyGrid도 있다.

공식문서에 사용법은 3가지로 나와있다.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")

LazyColumn {
    items(itemsList) {
        Text("Item is $it")
    }

    item {
        Text("Single item")
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

 

* 여기서 itemsIndexed 방법을 가장 많이 사용한다고 한다. 

inline fun <T : Any?> LazyListScope.itemsIndexed(
    items: Array<T>,
    noinline key: ((index: Int, item) -> Any)? = null,
    crossinline contentType: (index: Int, item) -> Any = { _, _ -> null },
    crossinline itemContent: @Composable LazyItemScope.(index: Int, item) -> Unit
): Unit

* 여기서 key 값을 넣는 이유는 그 index의 key 값을 알면 변화가 되었을때 그 데이터 값만 리컴포즈가 되어 효율적으로 처리할 수

   있기 때문이다.

* key 값은 주로 data.class 에 있는 id 값을 가져와서 사용한다

 

* 예시

* 데이터 클래스 생성

* Repository에 더미 데이터 생성

 

* 재활용할 Item인 CustomItem 생성

 

* MainActivity

* itemsIndexed에 item과 key로 person.id를 넘겨주었다. index, person 대신 _, person으로 해줘도 된다.

 

* 실행 결과

 

 

-------

참고 자료

https://kotlinworld.com/210

[Android Compose Lists] 2. Compose LazyColumn을 이용해 RecyclerView 만들기 + item, items, itemsIndexed사용법 정리

https://foso.github.io/Jetpack-Compose-Playground/foundation/lazycolumn/

LazyColumn - Jetpack Compose Playground

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazycolumn

androidx.compose.foundation.lazy  |  Android Developers