Jetpack Compose 实现滑动折叠效果

效果

实现代码

• 折叠部分

@Composable
fun TopImage(scrollState: ScrollState) {
    val move = ((-scrollState.value) * 0.3f).dp
    val modifier = Modifier
        .fillMaxWidth()
        .height(150.dp)
        .offset(y = move)
    //滑动时，向上平移
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = null,
        modifier = modifier
    )
}

• 滚动部分

val scrollState = rememberScrollState()
val cardHeight = 150.dp.value.toInt()
val marginTop = when {
    scrollState.value < 0 -> cardHeight
    cardHeight - scrollState.value < 0 -> 0
    else -> cardHeight - scrollState.value
}.dp

Box(Modifier.background(Color.Gray)){
    TopImage(scrollState)
    //滑动时，更新上边距
    Column(
        modifier = Modifier
        .padding(top = marginTop)
        .fillMaxSize()
        .background(Color.White)
        .verticalScroll(scrollState),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        for (i in 0..20) {
            Text("item $i", modifier = Modifier.height(50.dp))
        }
    }
}