Работили ли сте с компонента Collapsing Toolbar в Jetpack Compose?

В Jetpack Compose няма вградена компонента Collapsing Toolbar, както в класическия Android с CoordinatorLayout и AppBarLayout. Въпреки това, подобно поведение може да бъде реализирано с помощта на LazyColumn или NestedScrollConnection, като се следи скролването и се променя размерът или видимостта на горния компонент.

Пример за опростена реализация на колапсируема лента:

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("Колапсируема лента", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text("Елемент #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

За по-сложни случаи, могат да се използват библиотеки или създадат персонализирани решения с API-тата на NestedScroll.