LazyColumn {
items(books, key = { it.id }) {
val rememberedValue = rememberSaveable {
Random.nextInt()
}
Row(Modifier.animateItemPlacement(
tween(durationMillis = 250)
)) {
}
}
}
val childConstrains = Constraints (
maxWidth =
if (isVertical)
constraints.maxWidth
else
constraints.Infinity,
maxHeight =
if (isVertical)
constraints.maxHeight
else
constraints.Infinity
)
아이템을 처음 측정할 때 LazyColumn은 처음에 무제한 높이 제약 조건으로 항목을 측정한다.
계산을 위해 측정된 높이를 사용하여 사용 가능한 뷰포트를 채울 때까지 계속 구성하기 위해 아이템에 다른 제약을 가하지 않는다. 그 후 List는 아이템을 위한 처리를 중단한다.
이렇게 꽉 채워두면 데이터를 받기전 화면에 보이는 item은 1개가 된다.
@Composable
fun Item() {
Image(
painter = rememberImagePainter(
data = imgUrl
),
...
)
}
(1) 리스트 아이템이 처음에 0픽셀 높이를 차지하는 경우, 첫 번째 측정에서 Lazy Column 높이가 0픽셀이므로 모든 아이템이 구성된다.
(2) 몇 미리 초 후에 이미지가 로드되면, 아이템이 Recomposition되고 이미지가 표시된다.
(3) Lazy List는 실제 뷰포트에 들어갈 수 있는 아이템이 일부라는 것을 알고, 불필요하게 Composition된 다른 아이템을 모두 버린다.
이렇게 많은 item들이 리포지션 되면서 낭비가 발생하기 때문에 데이터 로드 전 후의 아이템 크기가 동일하게 유지되도록 하는것이 좋다.
//Throws IllegalStateException
Column(
modifier = Modifier.verticalScroll(state)
) {
LazyColumn(
...
)
}
//Try to like this
LazyColumn {
item {
Header()
}
items(data) { item ->
Item(item)
}
item {
Footer()
}
}