TransformingLazyColumn

Functions summary

Unit
@Composable
TransformingLazyColumn(
    modifier: Modifier,
    state: TransformingLazyColumnState,
    contentPadding: PaddingValues,
    reverseLayout: Boolean,
    verticalArrangement: Arrangement.Vertical,
    horizontalAlignment: Alignment.Horizontal,
    flingBehavior: FlingBehavior,
    userScrollEnabled: Boolean,
    rotaryScrollableBehavior: RotaryScrollableBehavior?,
    overscrollEffect: OverscrollEffect?,
    content: TransformingLazyColumnScope.() -> Unit
)

The vertically scrolling list that only composes and lays out the currently visible items.

Functions

TransformingLazyColumn

@Composable
fun TransformingLazyColumn(
    modifier: Modifier = Modifier,
    state: TransformingLazyColumnState = rememberTransformingLazyColumnState(),
    contentPadding: PaddingValues = PaddingValues(),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(
            space = 4.dp,
            alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom,
        ),
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: TransformingLazyColumnScope.() -> Unit
): Unit

The vertically scrolling list that only composes and lays out the currently visible items. This is a wear specific version of LazyColumn that adds support for scaling and morphing animations.

Example of a TransformingLazyColumn with default parameters:

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.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()
TransformingLazyColumn(contentPadding = PaddingValues(20.dp)) {
    items(count = 10) { index ->
        Button(
            modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}

Example of a TransformingLazyColumn that snaps items to the center of the viewport:

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.foundation.lazy.TransformingLazyColumnDefaults
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()
val state = rememberTransformingLazyColumnState()
TransformingLazyColumn(
    rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(scrollableState = state),
    flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(state = state),
    modifier = Modifier.fillMaxWidth(),
    state = state,
    contentPadding = PaddingValues(20.dp),
) {
    items(count = 20) { index ->
        Button(
            modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
            transformation = SurfaceTransformation(transformationSpec),
            onClick = {},
        ) {
            Text(text = "Item $index")
        }
    }
}
Parameters
modifier: Modifier = Modifier

The modifier to be applied to the layout.
state: TransformingLazyColumnState = rememberTransformingLazyColumnState()

The state object to be used to control the list and the applied layout.
contentPadding: PaddingValues = PaddingValues()

The padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via modifier param. You can use it to add padding before the first item or after the last one. Note that if the first or last item uses androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding, the effective vertical padding at that edge will be the maximum of the value provided here and the value calculated by androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding. This allows enforcing a minimum padding (e.g. for global screen insets) while still allowing specific items to request larger padding at the screen edge for specific items.
reverseLayout: Boolean = false

reverse the direction of scrolling and layout, when true items will be composed from the bottom to the top
verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy( space = 4.dp, alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom, )

The vertical arrangement of the items, to be used when there is enough space to show all the items. Note that only Arrangement.Top, Arrangement.Center and Arrangement.Bottom arrangements (including their spacedBy variants, i.e., using spacedBy with Alignment.Top, Alignment.CenterVertically and Alignment.Bottom) are supported, The default is Arrangement.Top when reverseLayout is false and Arrangement.Bottom when reverseLayout is true.
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally

The horizontal alignment of the items.
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior()

Logic describing fling behavior for touch scroll. If snapping is required use TransformingLazyColumnDefaults.snapFlingBehavior. Note that when configuring fling or snap behavior, this flingBehavior parameter and the rotaryScrollableBehavior parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if rotaryScrollableBehavior is set for snap (using RotaryScrollableDefaults.snapBehavior), flingBehavior should be set for snap as well (using TransformingLazyColumnDefaults.snapFlingBehavior)
userScrollEnabled: Boolean = true

Whether the user should be able to scroll the list. This also affects scrolling with rotary.
rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state)

Parameter for changing rotary scrollable behavior. Supports scroll RotaryScrollableDefaults.behavior and snap RotaryScrollableDefaults.snapBehavior. Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the flingBehavior parameter that controls touch scroll are expected to produce similar list scrolling. For example, if rotaryScrollableBehavior is set for snap (using RotaryScrollableDefaults.snapBehavior), flingBehavior should be set for snap as well (using TransformingLazyColumnDefaults.snapFlingBehavior). Can be null if rotary support is not required or when it should be handled externally - with a separate Modifier.rotaryScrollable modifier.
overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. Note that the OverscrollEffect.node will be applied internally as well - you do not need to use Modifier.overscroll separately.
content: TransformingLazyColumnScope.() -> Unit

The content of the list.