← Back to Tv Material
ListItem
Overview
Code Examples
Video
Lists are continuous, vertical indexes of text or images.
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.
This ListItem handles click events, calling its onClick lambda. It also support selected state which can be toggled using the selected param.
@param selected defines whether this ListItem is selected or not @param onClick called when this ListItem is clicked @param modifier Modifier to be applied to the list item @param enabled controls the enabled state of this list item. When false
, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. @param onLongClick called when this ListItem is long clicked (long-pressed). @param leadingContent the Composable leading content of the list item @param overlineContent the Composable content displayed above the headline content @param supportingContent the Composable content displayed below the headline content @param trailingContent the Composable trailing meta text, icon, switch or checkbox @param tonalElevation the tonal elevation of this list item @param shape ListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape. @param colors ListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors @param scale ListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale @param border ListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border @param glow ListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow @param interactionSource the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this list item in different states. @param headlineContent the Composable headline content of the list item
Overloads
ListItem
@ExperimentalTvMaterial3Api
@Composable
fun ListItem(
selected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onLongClick: (() -> Unit)? = null,
overlineContent: (@Composable () -> Unit)? = null,
supportingContent: (@Composable () -> Unit)? = null,
leadingContent: (@Composable BoxScope.() -> Unit)? = null,
trailingContent: (@Composable () -> Unit)? = null,
tonalElevation: Dp = ListItemDefaults.ListItemElevation,
shape: ListItemShape = ListItemDefaults.shape(),
colors: ListItemColors = ListItemDefaults.colors(),
scale: ListItemScale = ListItemDefaults.scale(),
border: ListItemBorder = ListItemDefaults.border(),
glow: ListItemGlow = ListItemDefaults.glow(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
headlineContent: @Composable () -> Unit
)
Parameters
Name | Description |
---|---|
selected | defines whether this ListItem is selected or not |
onClick | called when this ListItem is clicked |
modifier | Modifier to be applied to the list item |
enabled | controls the enabled state of this list item. When false , this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
onLongClick | called when this ListItem is long clicked (long-pressed). |
leadingContent | the Composable leading content of the list item |
overlineContent | the Composable content displayed above the headline content |
supportingContent | the Composable content displayed below the headline content |
trailingContent | the Composable trailing meta text, icon, switch or checkbox |
tonalElevation | the tonal elevation of this list item |
shape | ListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape. |
colors | ListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors |
scale | ListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale |
border | ListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border |
glow | ListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow |
interactionSource | the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this list item in different states. |
headlineContent | the Composable headline content of the list ite |