Kotlin with Jetpack Compose -List View

A List View is a basic component that we need in mobile development. In order to create a list view that scroll vertically, we can use LazyColumn with Jetpack compose. We can use a LazyRow to create a horizontal item list view.

When displaying a large number of items with an unknown length, using Column or Row will cause performance issues.

Compose provides a set of components which only compose and lay out items which are visible in the component’s viewport. These components include LazyColumn and LazyRow.

Properties of a lazy column.

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
) {

Lets see an example.

Creating a Data class and a list of data

data class ListItem(
    val id: Int,
    val title: String,
    val subtitle: String,
    val…