Sobes.tech
Junior — Middle

Haben Sie mit der Komponente Collapsing Toolbar in Jetpack Compose gearbeitet?

sobes.tech KI

Antwort von AI

In Jetpack Compose gibt es keine integrierte Komponente für eine kollabierende Toolbar, wie in klassischem Android mit CoordinatorLayout und AppBarLayout. Es ist jedoch möglich, ein ähnliches Verhalten mit LazyColumn oder NestedScrollConnection zu implementieren, indem man das Scrollen verfolgt und die Größe oder Sichtbarkeit des oberen Elements ändert.

Beispiel für eine vereinfachte Implementierung einer kollabierenden 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("Kollabierende Toolbar", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text("Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Für komplexere Fälle können Bibliotheken oder eigene Lösungen mit den NestedScroll-APIs verwendet werden.