TransformingLazyColumnItemScope

@TransformingLazyColumnScopeMarker
sealed interface TransformingLazyColumnItemScope

Receiver scope being used by the item content parameter of TransformingLazyColumn.

Summary

Public functions
Modifier
Modifier.animateItem(
    fadeInSpec: FiniteAnimationSpec<Float>?,
    placementSpec: FiniteAnimationSpec<IntOffset>?,
    fadeOutSpec: FiniteAnimationSpec<Float>?
)

This modifier animates item appearance (fade in), disappearance (fade out) and placement changes (such as an item reordering).
Modifier

This modifier allows items to choose a preferred content padding for the list, if they are placed at the top or bottom edge.
Modifier

This modifier allows items to choose a preferred content padding for the list, if they are placed at the top or bottom edge.
Modifier
Modifier.transformedHeight(
    heightProvider: (measuredHeight: Int, scrollProgress: TransformingLazyColumnItemScrollProgress) -> Int
)

Applies the new height of the item depending on its scroll progress and measured height.

Public properties
TransformingLazyColumnItemScrollProgress

Scroll progress of the item before height transformation is applied using Modifier.transformedHeight.
TransformingLazyColumnItemScrollProgress

Scroll progress of the item before height transformation is applied using Modifier.transformedHeight.

Extension functions
SurfaceTransformation

Exposes androidx.wear.compose.material3.lazy.TransformationSpec as SurfaceTransformation to be used with Material components.

Public functions

animateItem

fun Modifier.animateItem(
    fadeInSpec: FiniteAnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow),
    placementSpec: FiniteAnimationSpec<IntOffset>? = spring(
                stiffness = Spring.StiffnessMediumLow,
                visibilityThreshold = IntOffset.VisibilityThreshold,
            ),
    fadeOutSpec: FiniteAnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow)
): Modifier

This modifier animates item appearance (fade in), disappearance (fade out) and placement changes (such as an item reordering).

You should also provide a unique key via TransformingLazyColumnScope.item/ TransformingLazyColumnScope.items for this modifier to enable animations.

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material.Text

val state = rememberTransformingLazyColumnState()

var list by remember { mutableStateOf(listOf("1", "2", "3")) }

var next by remember { mutableIntStateOf(4) }

Box(Modifier.fillMaxSize()) {
    TransformingLazyColumn(
        state = state,
        contentPadding = PaddingValues(5.dp),
        modifier = Modifier.background(Color.Black).fillMaxSize(),
    ) {
        items(list.size, key = { list[it] }) {
            Text(
                "Item ${list[it]}",
                Modifier.animateItem().clickable {
                    list = list.filter { elem -> elem != list[it] }
                },
            )
        }
    }
    Text(
        "+",
        Modifier.align(Alignment.CenterStart).padding(horizontal = 5.dp).clickable {
            if (list.size < 25) list = list + "${next++}"
        },
    )
    Text(
        "S",
        Modifier.align(Alignment.CenterEnd).padding(horizontal = 5.dp).clickable {
            list = list.shuffled()
        },
    )
}
Parameters
fadeInSpec: FiniteAnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow)

an animation spec to use for animating the item appearance. When null is provided the item will appear without animations.
placementSpec: FiniteAnimationSpec<IntOffset>? = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntOffset.VisibilityThreshold, )

an animation spec that will be used to animate the item placement. Aside from item reordering all other position changes caused by events like arrangement or alignment changes will also be animated. When null is provided no animations will happen.
fadeOutSpec: FiniteAnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow)

an animation spec to use for animating the item disappearance. When null is provided the item will be disappearance without animations.

minimumVerticalContentPadding

fun Modifier.minimumVerticalContentPadding(padding: Dp): Modifier

This modifier allows items to choose a preferred content padding for the list, if they are placed at the top or bottom edge. When this item is at the top or bottom of the layout, the TransformingLazyColumn takes its contentPadding as the maximum of this vertical padding value and its own contentPadding parameter.

The vertical padding values are expected to be provided by design systems, such as the recommended values in Material3 ButtonDefaults, CardDefaults, ListHeaderDefaults and so on.

This modifier can be used to ensure that, when a list item is at the top or bottom of the list, the distance from the item to the screen edge is sufficient (such as to avoid the item being clipped by edges of a round screen).

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.material.Text
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()

TransformingLazyColumn(contentPadding = PaddingValues(horizontal = 20.dp)) {
    items(count = 20) { index ->
        Button(
            modifier =
                Modifier.fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(
                        ButtonDefaults.minimumVerticalListContentPadding
                    ),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}
Parameters
padding: Dp

The preferred content padding for the list, when this item is placed at either the top or bottom edges.

minimumVerticalContentPadding

fun Modifier.minimumVerticalContentPadding(top: Dp, bottom: Dp): Modifier

This modifier allows items to choose a preferred content padding for the list, if they are placed at the top or bottom edge. When this item is at the top or bottom of the layout, the TransformingLazyColumn takes its contentPadding as the maximum of these vertical padding values and its own contentPadding parameter.

The vertical padding values are expected to be provided by design systems, such as the recommended values in Material3 ButtonDefaults, CardDefaults, ListHeaderDefaults and so on.

This modifier can be used to ensure that, when a list item is at the top or bottom of the list, the distance from the item to the screen edge is sufficient (such as to avoid the item being clipped by edges of a round screen).

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.material.Text
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()

TransformingLazyColumn(contentPadding = PaddingValues(horizontal = 20.dp)) {
    items(count = 20) { index ->
        Button(
            modifier =
                Modifier.fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(
                        ButtonDefaults.minimumVerticalListContentPadding
                    ),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}
Parameters
top: Dp

The preferred top content padding for the list, when this item is placed at the top edge. Used when either this is the first item for a layout that is not reversed, or this is the last item for a reversed layout.
bottom: Dp

The preferred bottom content padding for the list, when this item is placed at the bottom edge. Used when either this is the last item for a layout that is not reversed, or this is the first item for a reversed layout.

transformedHeight

fun Modifier.transformedHeight(
    heightProvider: (measuredHeight: Int, scrollProgress: TransformingLazyColumnItemScrollProgress) -> Int
): Modifier

Applies the new height of the item depending on its scroll progress and measured height.

Parameters
heightProvider: (measuredHeight: Int, scrollProgress: TransformingLazyColumnItemScrollProgress) -> Int

The transformation to be applied. The first parameter is the height of the item returned during measurement. The second parameter is the scroll progress of the item. This lambda should not read from any state values.

Public properties

scrollProgress

val GraphicsLayerScope.scrollProgress: TransformingLazyColumnItemScrollProgress

Scroll progress of the item before height transformation is applied using Modifier.transformedHeight. Is TransformingLazyColumnItemScrollProgress.Unspecified for the item that is off screen.

scrollProgress

val DrawScope.scrollProgress: TransformingLazyColumnItemScrollProgress

Scroll progress of the item before height transformation is applied using Modifier.transformedHeight. Is TransformingLazyColumnItemScrollProgress.Unspecified for the item that is off screen.

Extension functions

SurfaceTransformation

fun TransformingLazyColumnItemScope.SurfaceTransformation(
    spec: TransformationSpec
): SurfaceTransformation

Exposes androidx.wear.compose.material3.lazy.TransformationSpec as SurfaceTransformation to be used with Material components.

Parameters
spec: TransformationSpec

TransformationSpec to be used.