TransformingLazyColumn - Composable Function in Wear Foundation

Composable Function

Android

@Composable
public 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,
)

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:

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

Parameters


modifier	The modifier to be applied to the layout.
state	The state object to be used to control the list and the applied layout.
contentPadding	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	reverse the direction of scrolling and layout, when `true` items will be composed from the bottom to the top
verticalArrangement	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	The horizontal alignment of the items.
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	Whether the user should be able to scroll the list. This also affects scrolling with rotary.
rotaryScrollableBehavior	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	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	The content of the list.

Android

Deprecated This overload is deprecated. Please use the new overload with the reverseLayout parameter.

@Composable
public fun TransformingLazyColumn(
    modifier: Modifier = Modifier,
    state: TransformingLazyColumnState = rememberTransformingLazyColumnState(),
    contentPadding: PaddingValues = PaddingValues(),
    verticalArrangement: Arrangement.Vertical =
        Arrangement.spacedBy(space = 4.dp, alignment = Alignment.Top),
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: TransformingLazyColumnScope.() -> 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:

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

Parameters


modifier	The modifier to be applied to the layout.
state	The state object to be used to control the list and the applied layout.
contentPadding	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.
verticalArrangement	The vertical arrangement of the items.
horizontalAlignment	The horizontal alignment of the items.
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	Whether the user should be able to scroll the list. This also affects scrolling with rotary.
rotaryScrollableBehavior	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	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	The content of the list.

Code Examples

SimpleTransformingLazyColumnSample

@Preview
@Composable
fun SimpleTransformingLazyColumnSample() {
    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")
            }
        }
    }
}

TransformingLazyColumnWithSnapSample

@Preview
@Composable
fun TransformingLazyColumnWithSnapSample() {
    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")
            }
        }
    }
}