targetMorphingHeight

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: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha27")
}

Overloads

fun Modifier.targetMorphingHeight(
    @Suppress("UNUSED_PARAMETER") scope: TransformingLazyColumnItemScope,
): Modifier

Parameters

name	description
scope	The [TransformingLazyColumnItemScope] provides access to the item's index and key.

Code Example

TransformingLazyColumnTargetMorphingHeightSample

@Preview
@Composable
fun TransformingLazyColumnTargetMorphingHeightSample() {
    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),
        )
    val state = rememberTransformingLazyColumnState()
    val coroutineScope = rememberCoroutineScope()
    AppScaffold {
        ScreenScaffold(
            state,
            bottomButton = {
                EdgeButton(
                    onClick = {
                        coroutineScope.launch {
                            // Scroll to the first non-header item.
                            state.scrollToItem(1)
                        }
                    }
                ) {
                    Text("To top")
                }
            }
        ) {
            TransformingLazyColumn(
                state = state,
                modifier =
                    Modifier.background(MaterialTheme.colorScheme.background)
                        .padding(horizontal = 10.dp),
            ) {
                item(contentType = "header") {
                    // No modifier is applied - no Material 3 Motion transformations.
                    ListHeader { Text("Drinks", style = MaterialTheme.typography.labelLarge) }
                }
                items(drinks, key = { it.title }) { 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}")
                    }
                }
            }
        }
    }
}