ConfDocs icon indicating copy to clipboard operation
ConfDocs copied to clipboard

Lazy layouts in Compose

Open fornewid opened this issue 3 years ago • 0 comments

  • https://youtu.be/1ANt65eoNhQ

RecyclerView

=

@Composable
fun FlowerList(flowers: List<Flower>) {
    LazyColumn {
        items(flowers) { flower ->
            FlowerItem(flower)
        }
    }
}
@Composable
fun FlowerItem(flower: Flower) {
    Column {
       Image(flower.image)
       Text(flower.name)
    }
}
LazyColumn {
    // LazyListScope block
    item {
        Text(header)
    }
    items(data) { item ->
        Item(item)
    }
    itemsIndexed(data) { index, item ->
        Item(item, index)
    }
}

:x: DON'T DO THIS

LazyRow(
    modifier = Modifier.padding(
        start = 24.dp,
        end = 24.dp
    )
) {
    items(data) { item ->
        Item(item)
    }
}

:white_check_mark: DO THIS

LazyRow(
    contentPadding = PaddingValues(
        start = 24.dp,
        end = 24.dp
    )
) {
    items(data) { item ->
        Item(item)
    }
}
val state = rememberLazyListState()

LazyColumn(
    state = state
) {
    items(data) { item ->
        Item(item)
    }
}

state.firstVisibleItemIndex
state.firstVisibleItemScrollOffset

val showScrollToTopButton by remember {
    derivedStateOf {
        state.firstVisibleItemIndexn> 0
    }
}

state.layoutInfo.visibleItemsInfo
state.layoutInfo.totalItemCount

state.layoutInfo.visibleItemsInfo
    .map { it.index }

fornewid avatar May 13 '22 10:05 fornewid