Έχετε εργαστεί με το συστατικό Collapsing Toolbar στο Jetpack Compose;

Στο Jetpack Compose δεν υπάρχει ενσωματωμένο συστατικό Collapsing Toolbar, όπως στο κλασικό Android με CoordinatorLayout και AppBarLayout. Ωστόσο, μπορεί να υλοποιηθεί μια παρόμοια συμπεριφορά χρησιμοποιώντας LazyColumn ή NestedScrollConnection, παρακολουθώντας την κύλιση και τροποποιώντας το μέγεθος ή την ορατότητα του επάνω στοιχείου.

Παράδειγμα απλοποιημένης υλοποίησης μιας collapsible toolbar:

var toolbarHeight by 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(state = scrollState) {
        items(100) { index ->
            Text("Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Για πιο πολύπλοκες περιπτώσεις, μπορούν να χρησιμοποιηθούν βιβλιοθήκες ή να δημιουργηθούν προσαρμοσμένες λύσεις με τις API του NestedScroll.