Jetpack Compose - 無法為腳手架底部欄的高度設置動畫

Question

當可滾動列表中的其他一些按鈕在屏幕上不再可見時，我需要在屏幕底部顯示一些浮動操作按鈕。 自然，我想為此使用LazyColumn 、 AnimatedVisibility和Scaffold的底部欄（我需要小吃欄和屏幕的內容位於浮動操作按鈕上方）。 但是 animation 不能按預期工作。 隨着浮動按鈕的出現/消失，底部欄的高度沒有動畫（但我認為實際上可能是內容填充沒有動畫）。

我得到的結果：

編碼：

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

lazycolumn 修飾符中的內容填充破壞了 animation；

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

出於同樣的看法；

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

Answer 2

我認為用AnimatedVisibility不可能做到這一點。 我得到它是這樣的

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

使用AnimatedContent而不是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(" ")
            )
        }
    }
}