Dolgozott már a Jetpack Compose-ban a Collapsing Toolbar komponenssel?

A Jetpack Compose-ban nincs beépített Collapsing Toolbar komponens, mint a klasszikus Androidban a CoordinatorLayout és az AppBarLayout esetében. Azonban hasonló viselkedést lehet megvalósítani LazyColumn vagy NestedScrollConnection segítségével, figyelve a görgetést és módosítva a felső komponens méretét vagy láthatóságát.

Egyszerűsített példája egy összeomló toolbarnak:

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

Komplexebb esetekhez, használhatók könyvtárak vagy saját megoldások a NestedScroll API-k segítségével.