Назад к вопросам
Junior — Middle
72
Какими способами можно создать эффект сжимающейся панели инструментов в Jetpack Compose?
Компании, где спрашивали
Ubic
Ответ от нейросети
sobes.tech AI
В Jetpack Compose эффект сжимающейся (collapsing) панели инструментов можно создать несколькими способами:
-
Использовать
LazyColumnилиLazyListStateдля отслеживания прокрутки и изменять высоту или прозрачность верхнего компонента в зависимости от позиции прокрутки. -
Применить библиотеку Accompanist, которая предоставляет
CollapsingToolbarи другие компоненты для реализации такого эффекта. -
Комбинировать
Modifier.offsetиModifier.graphicsLayerс состоянием прокрутки, чтобы анимировать сжатие панели.
Пример упрощенного варианта с использованием LazyColumn и изменения высоты:
val scrollState = rememberLazyListState()
val toolbarHeight = 200.dp
val minToolbarHeight = 56.dp
val offset = minOf(scrollState.firstVisibleItemScrollOffset.toFloat(), with(LocalDensity.current) { (toolbarHeight - minToolbarHeight).toPx() })
val currentHeight = toolbarHeight - with(LocalDensity.current) { offset.toDp() }
Column {
Box(
Modifier
.height(currentHeight)
.fillMaxWidth()
.background(Color.Blue)
) {
Text("Toolbar", Modifier.align(Alignment.Center), color = Color.White)
}
LazyColumn(state = scrollState) {
items(100) { index ->
Text("Item #$index", Modifier.padding(16.dp))
}
}
}
Этот код изменяет высоту панели в зависимости от прокрутки списка, создавая эффект сжатия.