본 글은 개인적으로 Jetpack AndroidX Compose의 스터디한 내용을 정리하는 아카이브용입니다.
지극히 개인적인 의견입니다.
테스트 전제 조건
실험하는 소스 : https://github.com/Pluu/WebToon/compare/develop-compose
하나의 Canvas에 Compsoe를 렌더링하지만, 레이아웃 구조에서는 Stack이나 Overdraw 형태로 정의될 수 있기 때문에 드는 생각
안드로이드 GPU 오버드로 디버그에서는 발생하는 것처럼 보이는데… 맞을까…
기존 코드 패턴에서 Adapter에 맵핑되는 것은 LazyItemScope 에 해당된다.
@Composable
fun <T> LazyColumnFor(
items: List<T>,
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
itemContent: @Composable LazyItemScope.(T) -> Unit
) {
아이템 사이즈와 threshold 를 계산해서 Paging이나 Load More 시작 여부를 호출한다면 대안은 Index를 지원하는 LazyColumnFor, LazyRowFor Compose를 사용
LazyColumnForIndexed(items = ...) { index, item ->
// if (index + threshold == lastIndex ) ...
}
LazyRowForIndexed(items = ...) { index, item ->
// if (index + threshold == lastIndex ) ...
}
1) LazyColumnFor에 전달하는 List
2) 고정적인 데이터 기준으로 Lazy 처리
import androidx.compose.foundation.Text
import androidx.compose.foundation.lazy.LazyColumn
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")
}
}
https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazycolumn
3) 내부 비교
LazyColumn와 LazyColumnFor 둘 다 LazyFor Compose를 사용
LazyFor는 internal inline
LazyColumn
@Composable
@ExperimentalLazyDsl
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: LazyListScope.() -> Unit
) {
val scope = LazyListScopeImpl()
scope.apply(content)
LazyFor(
itemsCount = scope.totalSize,
modifier = modifier,
state = state,
contentPadding = contentPadding,
horizontalAlignment = horizontalAlignment,
isVertical = true
) { index ->
scope.contentFor(index, this)
}
}
LazyColumnFor
@Composable
fun <T> LazyColumnFor(
items: List<T>,
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
itemContent: @Composable LazyItemScope.(T) -> Unit
) {
LazyFor(
itemsCount = items.size,
modifier = modifier,
state = state,
contentPadding = contentPadding,
horizontalAlignment = horizontalAlignment,
isVertical = true
) { index ->
val item = items[index]
{
key(index) {
itemContent(item)
}
}
}
}
comments powered by Disqus
Subscribe to this blog via RSS.
LazyColumn/Row에서 동일한 Key를 사용하면 크래시가 발생하는 이유
Posted on 30 Nov 2024