ListItem

Functions summary

Unit
@Composable
ListItem(
    modifier: Modifier,
    supportingLabel: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

ListItem is a component used to represent a single item in a androidx.xr.glimmer.list.VerticalList.
Unit
@Composable
ListItem(
    onClick: () -> Unit,
    modifier: Modifier,
    supportingLabel: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

ListItem is a component used to represent a single item in a androidx.xr.glimmer.list.VerticalList.

Functions

ListItem

@Composable
fun ListItem(
    modifier: Modifier = Modifier,
    supportingLabel: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

ListItem is a component used to represent a single item in a androidx.xr.glimmer.list.VerticalList. A ListItem has a primary label content, and may also have any combination of supportingLabel, leadingIcon, and trailingIcon. The supporting label is displayed below the primary label and can be used to provide additional information. A ListItem fills the maximum width available by default.

This ListItem is focusable - see the other ListItem overload for a clickable ListItem.

A simple ListItem with just a primary label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem { Text("Primary Label") }

A ListItem with a primary and supporting label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(supportingLabel = { Text("Supporting Label") }) { Text("Primary Label") }

A ListItem with a primary label, a supporting label, and a leading icon:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(
    supportingLabel = { Text("Supporting Label") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("Primary Label")
}
Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this list item
supportingLabel: (@Composable () -> Unit)? = null

optional supporting label to be placed underneath the primary label content
leadingIcon: (@Composable () -> Unit)? = null

optional leading icon to be placed before the primary label content. This is typically an Icon.
trailingIcon: (@Composable () -> Unit)? = null

optional trailing icon to be placed after the primary label content. This is typically an Icon.
shape: Shape = GlimmerTheme.shapes.medium

the Shape used to clip this list item, and also used to draw the background and border
color: Color = GlimmerTheme.colors.surface

background color of this list item
contentColor: Color = calculateContentColor(color)

content color used by components inside content, and supportingLabel.
border: BorderStroke? = SurfaceDefaults.border()

the border to draw around this list item
contentPadding: PaddingValues = ListItemDefaults.contentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.
content: @Composable () -> Unit

the main content / primary label to display inside this list item

ListItem

@Composable
fun ListItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    supportingLabel: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

ListItem is a component used to represent a single item in a androidx.xr.glimmer.list.VerticalList. A ListItem has a primary label content, and may also have any combination of supportingLabel, leadingIcon, and trailingIcon. The supporting label is displayed below the primary label and can be used to provide additional information. A ListItem fills the maximum width available by default.

This ListItem is focusable and clickable - see the other ListItem overload for a ListItem that is only focusable.

A simple clickable ListItem with just a primary label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(onClick = {}) { Text("Primary Label") }

A clickable ListItem with a primary and supporting label:

import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(onClick = {}, supportingLabel = { Text("Supporting Label") }) { Text("Primary Label") }

A clickable ListItem with a primary label, a supporting label, and a leading icon:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.ListItem
import androidx.xr.glimmer.Text

ListItem(
    onClick = {},
    supportingLabel = { Text("Supporting Label") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("Primary Label")
}
Parameters
onClick: () -> Unit

called when this list item is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this list item
supportingLabel: (@Composable () -> Unit)? = null

optional supporting label to be placed underneath the primary label content
leadingIcon: (@Composable () -> Unit)? = null

optional leading icon to be placed before the primary label content. This is typically an Icon.
trailingIcon: (@Composable () -> Unit)? = null

optional trailing icon to be placed after the primary label content. This is typically an Icon.
shape: Shape = GlimmerTheme.shapes.medium

the Shape used to clip this list item, and also used to draw the background and border
color: Color = GlimmerTheme.colors.surface

background color of this list item
contentColor: Color = calculateContentColor(color)

content color used by components inside content, and supportingLabel.
border: BorderStroke? = SurfaceDefaults.border()

the border to draw around this list item
contentPadding: PaddingValues = ListItemDefaults.contentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.
content: @Composable () -> Unit

the main content / primary label to display inside this list item