targetMorphingHeight
Android
Modifier in Wear Material 3 Compose
This modifier provides the height of the target composable to the [scrollTransform] during a morph transition and represents minimum height of the item when morphed.
Should be applied to a single child element or none at all (in which case, the morph effect is disabled). When applied to multiple child elements, the last placed child's height we be used for morphing.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}
Overloads
fun Modifier.targetMorphingHeight(
@Suppress("UNUSED_PARAMETER") scope: LazyColumnItemScope,
): Modifier
Parameters
name | description |
---|---|
scope | The LazyColumnItemScope provides access to the item's index and key. |
Code Example
LazyColumnTargetMorphingHeightSample
@Preview
@Composable
fun LazyColumnTargetMorphingHeightSample() {
data class MenuItem(val title: String, val price: Float)
val drinks =
listOf(
MenuItem("Cappuccino", 2.5f),
MenuItem("Late", 3f),
MenuItem("Flat White", 3.2f),
MenuItem("Americano", 1.5f),
MenuItem("Black tea", 2f),
MenuItem("London fog", 2.6f),
)
MaterialTheme {
Box(modifier = Modifier.aspectRatio(1f).background(Color.Black)) {
LazyColumn(
modifier = Modifier.padding(horizontal = 10.dp),
) {
item {
// No modifier is applied - no Material 3 Motion transformations.
ListHeader { Text("Drinks", style = MaterialTheme.typography.labelLarge) }
}
items(drinks) { notification ->
Column(
modifier =
Modifier.fillMaxWidth()
// Apply Material 3 Motion effect.
.scrollTransform(
this@items,
backgroundColor = Color.DarkGray,
shape = RoundedCornerShape(20.dp),
)
.padding(horizontal = 10.dp)
) {
Text(
notification.title,
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.labelLarge,
// Morphing is focusing on the title.
modifier = Modifier.targetMorphingHeight(this@items)
)
// Price is revealed after the morph.
Text("$${notification.price}")
}
}
}
}
}
}