TransformingLazyColumnAnchorType

TransformingLazyColumnRequestAnchorItemSample

@Preview
@Composable
fun TransformingLazyColumnRequestAnchorItemSample() {
    // This sample demonstrates how to use requestAnchorItem to control the expansion direction
    // of an item. When the "input_box" Button is clicked, its text content grows, causing its
    // intrinsic height to increase. By requesting ItemBottom as the layout anchor immediately
    // before the state change, the visual bottom edge of the button remains pinned in place on
    // the screen, and the new height expands upwards.
    val state = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()
    var textLines by remember { mutableIntStateOf(1) }
    TransformingLazyColumn(
        state = state,
        contentPadding = PaddingValues(20.dp),
        modifier = Modifier.fillMaxSize(),
    ) {
        items(3, key = { "item_$it" }) { index ->
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth()
                        .transformedHeight(this, transformationSpec)
                        .minimumVerticalContentPadding(
                            ButtonDefaults.minimumVerticalListContentPadding
                        ),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                Text(text = "Item $index")
            }
        }
        // The expanding item
        item(key = "input_box") {
            Button(
                onClick = {
                    state.requestAnchorItem(
                        key = "input_box",
                        anchorType = TransformingLazyColumnAnchorType.ItemBottom,
                    )
                    textLines = if (textLines < 4) textLines + 1 else 1
                },
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                val text = List(textLines) { "Input line ${it + 1}" }.joinToString("\n")
                Text(text = text)
            }
        }
        items(3, key = { "item_${it + 4}" }) { index ->
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth()
                        .transformedHeight(this, transformationSpec)
                        .minimumVerticalContentPadding(
                            ButtonDefaults.minimumVerticalListContentPadding
                        ),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                Text(text = "Item ${index + 4}")
            }
        }
    }
}