scrollTransform
Android
Modifier in Wear Material 3 Compose
A modifier that enables Material3 Motion transformations for content within a LazyColumn item. It also draws the background behind the content using Material3 Motion transformations. There is also an overload that applies the same visual transformations to the background.
This modifier calculates and applies transformations to the content based on the [LazyColumnItemScrollProgress] of the item inside the LazyColumn. It adjusts the height, position, applies scaling and morphing effects as the item scrolls.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}
Overloads
@Composable
fun Modifier.scrollTransform(
scope: LazyColumnItemScope,
backgroundColor: Color,
shape: Shape = RectangleShape
): Modifier
Parameters
name | description |
---|---|
scope | The LazyColumnItemScope provides access to the item's index and key. |
backgroundColor | Color of the background. |
shape | Shape of the background. |
@Composable
fun Modifier.scrollTransform(
scope: LazyColumnItemScope,
): Modifier
Parameters
name | description |
---|---|
scope | The LazyColumnItemScope provides access to the item's index and key. |
Code Example
LazyColumnScalingMorphingEffectSample
@Preview
@Composable
fun LazyColumnScalingMorphingEffectSample() {
val allIngredients = listOf("2 eggs", "tomato", "cheese", "bread")
LazyColumn(modifier = Modifier.background(Color.Black).padding(horizontal = 10.dp)) {
item {
// No modifier is applied - no Material 3 Motion.
ListHeader { Text("Ingredients") }
}
items(allIngredients) { ingredient ->
Text(
ingredient,
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.bodyLarge,
modifier =
Modifier.fillMaxWidth()
// Apply Material 3 Motion transformations.
.scrollTransform(
this,
backgroundColor = MaterialTheme.colorScheme.surfaceContainer,
shape = RoundedCornerShape(10.dp)
)
.padding(10.dp)
)
}
}
}