New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

ListHeader

Android

A slot based composable for creating a list header item. List header items are typically expected to be text. The contents provided will have text and colors effects applied based on the MaterialTheme. The contents will be start and end padded and should cover up to 3 lines of text.

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = MaterialTheme.colors.onSurfaceVariant,
    content: @Composable RowScope.() -> Unit
)

Parameters

namedescription
modifierThe modifier for the list header
backgroundColorThe background color to apply - typically Color.Transparent
contentColorThe color to apply to content
contentSlot for displayed header text

Code Example

ScalingLazyColumnWithHeaders

@Composable
@Sampled
fun ScalingLazyColumnWithHeaders() {
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
    ) {
        item { ListHeader { Text("Header1") } }
        items(5) {
            Chip(
                onClick = { },
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
        item { ListHeader { Text("Header2") } }
        items(5) {
            Chip(
                onClick = { },
                label = { Text("List item ${it + 5}") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
    }
}