LazyColumn - devrath/ComposeAlchemy GitHub Wiki

Usage

• We can use this component to load the list lazily when needed.
• In addition the compose provides a way of adding the sticky items and any custom items when needed much more flexibly compared to the recycler-view.

Code

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyListDemoScreen(modifier: Modifier = Modifier) {

    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {

        stickyHeader(
            key = "Header-1"
        ) {
            Box(
                modifier = Modifier.fillMaxWidth().height(100.dp).background(color = Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    fontSize = 20.sp,
                    text = "Header-1"
                )
            }
        }

        for (i in 1..15){
            item{
                Box(
                    modifier = Modifier.padding(20.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        modifier = Modifier.fillMaxWidth().height(40.dp),
                        text = "Content-$i"
                    )
                }
            }
        }

        stickyHeader(
            key = "Header-2"
        ) {
            Box(
                modifier = Modifier.fillMaxWidth().height(100.dp).background(color = Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    fontSize = 20.sp,
                    text = "Header-2"
                )
            }
        }

        for (i in 1..15){
            item{
                Box(
                    modifier = Modifier.padding(20.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        modifier = Modifier.fillMaxWidth().height(40.dp),
                        text = "Content-$i"
                    )
                }
            }
        }

        stickyHeader(
            key = "Header-3"
        ) {
            Box(
                modifier = Modifier.fillMaxWidth().height(100.dp).background(color = Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    fontSize = 20.sp,
                    text = "Header-3"
                )
            }
        }

        for (i in 1..15){
            item{
                Box(
                    modifier = Modifier.padding(20.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        modifier = Modifier.fillMaxWidth().height(40.dp),
                        text = "Content-$i"
                    )
                }
            }
        }

    }

}

Output

sticky_list_view.webm