Как анимировать размер изображения заголовка и профиля на основе смещения прокрутки в Jetpack Compose? ⇐ Android

[Anonymous]

Я создаю экран профиля, куда добавляю TopBarBackground. Я хочу, чтобы размер TopBarBackground уменьшался по мере того, как пользователь прокручивает содержимое. Во время этого уменьшения размера первый элемент контента должен оставаться видимым. Аналогично, при прокрутке вверх первый элемент должен загрузиться правильно. Если пользователь прокручивает страницу дальше, изменение размера должно работать должным образом. Однако в моем текущем коде, когда пользователь прокручивает, первый элемент контента становится невидимым, а размер уменьшается.
TopBarBackground

Код: Выделить всё

@Composable
fun TopBarBackground(
modifier: Modifier = Modifier,
bottomRounded:  Int = 60,
) {

Box(
modifier = modifier
.fillMaxWidth()
.drawBehind {
val path = Path().apply {
moveTo(0f, 0f)
lineTo(0f, size.height)
quadraticTo(
size.width / 2, size.height + bottomRounded.dp.toPx(),
size.width, size.height
)
lineTo(size.width, 0f)
close()
}

val brush = Brush.verticalGradient(
colors = listOf(
LinearGradient1,
LinearGradient2
),
)
drawPath(path, brush)
}
) {

Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = R.drawable.ic_topbar_background),
contentDescription = null,
modifier = Modifier
.align(Alignment.TopStart)
.padding(bottom = 20.sdp)
.fillMaxHeight(),
)

}

}
}

Экран профиля

Код: Выделить всё

    val listState = rememberLazyListState()

val totalScrollOffset by remember {
derivedStateOf {
listState.firstVisibleItemIndex * 100 + listState.firstVisibleItemScrollOffset
}
}
val animatedHeaderHeight by animateDpAsState(
targetValue = (150 - totalScrollOffset / 2).coerceIn(70, 150).sdp,
animationSpec = tween(durationMillis = 300)
)

val animateProfileImage by animateDpAsState(
targetValue = (80 - (totalScrollOffset / 2).coerceIn(0, 20)).sdp,
animationSpec = tween(durationMillis = 300)
)
val animateUserName by animateDpAsState(
targetValue = (16 - (totalScrollOffset / 2).coerceIn(0, 6)).sdp,
animationSpec = tween(durationMillis = 300)
)

Surface {
Column(
modifier = Modifier
.fillMaxSize()
.background(color = Color.White),
) {

Column(
modifier = Modifier
.fillMaxWidth()
) {
Box {
TopBarBackground(
modifier = Modifier.height(animatedHeaderHeight),

)

Box(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.sdp)
.padding(horizontal = 10.sdp)
) {

Text(
modifier = Modifier.align(Alignment.Center),
text = "Profile",
color = Color.White,
fontFamily = Inter600,
fontSize = 16.ssp
)

}
}
Column(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.offset(y = -20.dp),
verticalArrangement = Arrangement.spacedBy(6.sdp),
horizontalAlignment = Alignment.CenterHorizontally
) {

Image(
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = null,
modifier = Modifier
.align(Alignment.CenterHorizontally)
.size(animateProfileImage)
.shadow(elevation = 10.sdp, shape = CircleShape)
.background(color = Color.White,  shape = CircleShape)
.padding(10.sdp),
colorFilter = ColorFilter.tint(ThemeDarkGreen)

)

Text(
modifier = Modifier.align(Alignment.CenterHorizontally),
text = userName,
color = Color.Black,
fontFamily = Inter600,
fontSize = animateUserName.value.toInt().ssp
)
}
}

LazyColumn(
state = listState,
modifier = Modifier
.fillMaxSize(),

) {

items(
items = settingsList,
key = { item -> item.text }) { item ->
SettingsOption(
iconId = item.iconId,
text = item.text,
onClick = item.action
)
}
}
}
}

В моем текущем коде, когда пользователь прокручивает, первый элемент контента становится невидимым, а размер уменьшается. Кроме того, прокрутка дергается и работает неправильно, особенно если список данных небольшой.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -jetpack-c