Heeft u ooit met de Collapsing Toolbar-component in Jetpack Compose gewerkt?

In Jetpack Compose is er geen ingebouwde component voor een Collapsing Toolbar, zoals in klassiek Android met CoordinatorLayout en AppBarLayout. Het is echter mogelijk om een vergelijkbaar gedrag te implementeren met behulp van LazyColumn of NestedScrollConnection, door het scrollen te volgen en de grootte of zichtbaarheid van het bovenste component aan te passen.

Voorbeeld van een eenvoudige implementatie van een collapsible toolbar:

var toolbarHeight door 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("Collapsing Toolbar", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
    LazyColumn(sta = scrollState) {
        items(100) { index ->
            Text("Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Voor complexere gevallen kunnen bibliotheken of aangepaste oplossingen worden gebruikt met de NestedScroll API's.