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.

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.minimumListVerticalContentPadding
                    ),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}
Parameters
padding: Dp

The minimum padding above or below this item in the parent TransformingLazyColumn.

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.

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.minimumListVerticalContentPadding
                    ),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}
Parameters
top: Dp

The minimum top padding above this item in the parent TransformingLazyColumn (or minimum bottom padding if reverseLayout is true)
bottom: Dp

The minimum bottom padding below this item in the parent TransformingLazyColumn (or minimum top padding if reverseLayout is true).

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.