ListItem

Component in Tv Material Compose

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.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.tv:tv-material:1.0.0")
}

Overloads

@Composable
fun ListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> 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.TonalElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null
)

Parameters

name	description
selected	defines whether this ListItem is selected or not
onClick	called when this ListItem is clicked
headlineContent	the [Composable] headline content of the list item
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	an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.