Sobes.tech
Junior — Middle

Czy pracowałeś z komponentem Collapsing Toolbar w Jetpack Compose?

sobes.tech AI

Odpowiedź od AI

W Jetpack Compose nie ma wbudowanego komponentu Collapsing Toolbar, jak w klasycznym Androidzie z CoordinatorLayout i AppBarLayout. Jednak można zaimplementować podobne zachowanie za pomocą LazyColumn lub NestedScrollConnection, śledząc przewijanie i zmieniając rozmiar lub widoczność górnego elementu.

Przykład uproszczonej implementacji kolapsującego paska narzędzi:

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

Dla bardziej skomplikowanych przypadków można używać bibliotek lub tworzyć własne rozwiązania z API NestedScroll.