Sobes.tech
Junior — Middle

Já trabalhou com o componente Collapsing Toolbar no Jetpack Compose?

sobes.tech IA

Resposta da IA

No Jetpack Compose há um componente incorporado de Toolbar Colapsável, como no Android clássico com CoordinatorLayout e AppBarLayout. No entanto, pode-se implementar um comportamento semelhante usando LazyColumn ou NestedScrollConnection, acompanhando a rolagem e alterando o tamanho ou a visibilidade do componente superior.

Exemplo de uma implementação simplificada de uma toolbar colapsável:

var toolbarHeight por remember { mutableStateOf(200.dp) }
val scrollState = rememberLazyListState()

LaunchedEffect(scrollState.firstVisibleItemScrollOffset) {
    toolbarHeight = (200 - scrollState.firstVisibleItemScrollOffset.dp).coerceAtLeast(56.dp)
}

Column {
    Box(modifier = Modifier
        .height(toolbarHeight)
        .fillMaxWidth()
        .background(Color.Blue)) {
        Text("Toolbar Colapsável", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text("Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Para casos mais complexos, pode-se usar bibliotecas ou criar soluções personalizadas com as APIs de NestedScroll.