ListHeader

Functions summary

Unit	@Composable ListHeader(     modifier: Modifier,     backgroundColor: Color,     contentColor: Color,     contentPadding: PaddingValues,     transformation: SurfaceTransformation?,     content: @Composable RowScope.() -> Unit ) A slot based composable for creating a list header item.

Functions

ListHeader

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.contentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

A slot based composable for creating a list header item. ListHeaders are typically expected to be a few words of text on a single line. The contents will be start and end padded.

ListHeader scales itself appropriately when used within the scope of a TransformingLazyColumn.

Example of a ListHeader:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListHeaderDefaults
import androidx.wear.compose.material3.ListSubHeader
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()
val scrollState = rememberTransformingLazyColumnState()

AppScaffold {
    ScreenScaffold(scrollState = scrollState) { contentPadding ->
        TransformingLazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            contentPadding = contentPadding,
        ) {
            item {
                ListHeader(
                    modifier =
                        Modifier.minimumVerticalContentPadding(
                                ListHeaderDefaults.minimumTopListContentPadding,
                                ListHeaderDefaults.minimumBottomListContentPadding,
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                ) {
                    Text("Settings")
                }
            }
            item {
                ListSubHeader(
                    modifier =
                        Modifier.minimumVerticalContentPadding(
                                ListHeaderDefaults.minimumTopListContentPadding,
                                ListHeaderDefaults.minimumBottomListContentPadding,
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_connectivity),
                            contentDescription = "Connectivity",
                        )
                    },
                    label = { Text("Connectivity") },
                )
            }
            item {
                Button(
                    modifier =
                        Modifier.fillMaxWidth()
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_bluetooth),
                            contentDescription = "Bluetooth",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Bluetooth")
                }
            }
            item {
                Button(
                    modifier =
                        Modifier.fillMaxWidth()
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_wifi),
                            contentDescription = "Wifi",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Wifi")
                }
            }
            item {
                ListSubHeader(
                    modifier =
                        Modifier.minimumVerticalContentPadding(
                                ListHeaderDefaults.minimumTopListContentPadding,
                                ListHeaderDefaults.minimumBottomListContentPadding,
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                ) {
                    Text("Display")
                }
            }
            item {
                Button(
                    modifier =
                        Modifier.fillMaxWidth()
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                    onClick = {},
                ) {
                    Text("Change Watchface")
                }
            }
            item {
                Button(
                    modifier =
                        Modifier.fillMaxWidth()
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            )
                            .transformedHeight(this, transformationSpec),
                    transformation = SurfaceTransformation(transformationSpec),
                    onClick = {},
                ) {
                    Text("Brightness")
                }
            }
        }
    }
}

Parameters
modifier: Modifier = Modifier	The modifier for the ListHeader.
backgroundColor: Color = Color.Transparent	The background color to apply - typically Color.Transparent
contentColor: Color = ListHeaderDefaults.contentColor	The color to apply to content.
contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding	The spacing values to apply internally between the background and the content.
transformation: SurfaceTransformation? = null	Transformation to be used when header appears inside the container that needs to dynamically change its content separately from the background.
content: @Composable RowScope.() -> Unit	Slot for ListHeader content, expected to be a single line of text.