Jetpack Compose ListItem in Material 3 Compose

<a href="https://m3.material.io/components/lists/overview" class="external" target="_blank">Material Design list item.</a>

Lists are continuous, vertical indexes of text or images.

!Lists image(https://developer.android.com/images/reference/androidx/compose/material3/lists.png)

This component can be used to achieve the list item templates existing in the spec. One-line list items have a singular line of headline content. Two-line list items additionally have either supporting or overline content. Three-line list items have either both supporting and overline content, or extended (two-line) supporting text. For example:

one-line item

Overloads

ListItem

@Composable
fun ListItem(
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    overlineContent: @Composable (() -> Unit)? = null,
    supportingContent: @Composable (() -> Unit)? = null,
    leadingContent: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    colors: ListItemColors = ListItemDefaults.colors(),
    tonalElevation: Dp = ListItemDefaults.Elevation,
    shadowElevation: Dp = ListItemDefaults.Elevation,
)

Parameters

Name	Description
`headlineContent`	the headline content of the list item
`modifier`	Modifier to be applied to the list item
`overlineContent`	the content displayed above the headline content
`supportingContent`	the supporting content of the list item
`leadingContent`	the leading content of the list item
`trailingContent`	the trailing meta text, icon, switch or checkbox
`colors`	ListItemColors that will be used to resolve the background and content color for this list item in different states. See ListItemDefaults.colors
`tonalElevation`	the tonal elevation of this list item
`shadowElevation`	the shadow elevation of this list ite

← Back to Material 3 Compose

ListItem

Overloads

ListItem

Parameters