Jetpack Compose - 无法为脚手架底部栏的高度设置动画

Question

I need to reveal some floating action buttons at the bottom of the screen when some other buttons, in a scrollable list, are no longer visible on the screen. Naturally, I feel like using LazyColumn , AnimatedVisibility and Scaffold 's bottom bar for this (I need the snackbar and the screen's content be above the floating action buttons). But the animation doesn't work as expected. As the floating buttons appear/dissapear, the bottom bar's height is not animated (but I think it could actually be that the content padding isn't animated).

The result I'm getting:

The code:

val lazyListState = rememberLazyListState()
val isFloatingButtonVisible by derivedStateOf {
    lazyListState.firstVisibleItemIndex >= 2
}
Scaffold(
    bottomBar = {
        AnimatedVisibility(
            visible = isFloatingButtonVisible,
            enter = slideInVertically { height -> height },
            exit = slideOutVertically { height -> height }
        ) {
            Row(
                modifier = Modifier.padding(8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                repeat(2) {
                    Button(
                        modifier = Modifier
                            .height(48.dp)
                            .weight(1f),
                        onClick = {}
                    ) {
                        Text(text = "Something")
                    }
                }
            }
        }
    }
) { contentPadding ->
    LazyColumn(
        modifier = Modifier.padding(contentPadding),
        state = lazyListState,
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            Text(
                text = LoremIpsum(50).values.joinToString(" ")
            )
        }
        item {
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                repeat(2) {
                    Button(onClick = {}) {
                        Text(text = "Bla Bla")
                    }
                }
            }
        }
        item {
            Text(
                text = LoremIpsum(700).values.joinToString(" ")
            )
        }
    }
}

Answer 1

The content padding in lazycolumn modifier breaks the animation;

LazyColumn(
   modifier = Modifier.padding(contentPadding) // -> Delete this.
)

For the same view;

Row(
   modifier = Modifier
      .background(Color.White) //-> Add this.
      .padding(8.dp) 
)

Answer 2

I don't think it's possible to do this with AnimatedVisibility . I got it like this

val bottomBarHeight = (48 + 8 * 2).dp // button height + paddings

@Composable
fun Test() {
    val lazyListState = rememberLazyListState()

    val isFloatingButtonVisible by derivedStateOf {
        lazyListState.firstVisibleItemIndex >= 1
    }

    val offset by animateDpAsState(if (isFloatingButtonVisible) bottomBarHeight else 0.dp)

    BoxWithConstraints(Modifier.fillMaxSize()) {
        LazyColumn(
            modifier = Modifier
                .size(width = maxWidth, height = maxHeight - offset)
                .background(Color.Yellow),
            state = lazyListState,
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            repeat(15) {
                item {
                    Text(
                        text = LoremIpsum(50).values.joinToString(" ")
                    )
                }
            }
        }

        Row(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .offset(0.dp, -offset + bottomBarHeight)
                .background(Color.Green)
                .padding(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            repeat(2) {
                Button(
                    modifier = Modifier
                        .height(48.dp)
                        .weight(1f),
                    onClick = {}
                ) {
                    Text(text = "Something")
                }
            }
        }
    }
}

Answer 3

Got the right result using AnimatedContent instead of AnimatedVisibility .

val lazyListState = rememberLazyListState()
val isFloatingButtonVisible by derivedStateOf {
    lazyListState.firstVisibleItemIndex >= 2
}
Scaffold(
    bottomBar = {
        AnimatedContent(
            targetState = isFloatingButtonVisible,
            transitionSpec = {
                slideInVertically { height -> height } with
                slideOutVertically { height -> height }
            }
        ) { isVisible ->
            if (isVisible) {
                Row(
                    modifier = Modifier
                        .border(1.dp, Color.Red)
                        .padding(8.dp),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    repeat(2) {
                        Button(
                            modifier = Modifier
                                .height(48.dp)
                                .weight(1f),
                            onClick = {}
                        ) {
                            Text(text = "Something")
                        }
                    }
                }
            } else {
                Box(modifier = Modifier.fillMaxWidth())
            }
        }
    }
) { contentPadding ->
    LazyColumn(
        modifier = Modifier.padding(contentPadding),
        state = lazyListState,
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            Text(
                text = LoremIpsum(50).values.joinToString(" ")
            )
        }
        item {
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                repeat(2) {
                    Button(onClick = {}) {
                        Text(text = "Bla Bla")
                    }
                }
            }
        }
        item {
            Text(
                text = LoremIpsum(700).values.joinToString(" ")
            )
        }
    }
}