android - 为 BottomBar 的可见性设置动画会导致 Jetpack Compose 中的“跳跃”用户界面

Question

我正在使用 jetpack compose 编写一个 android-app。

这个应用程序有一个底部栏，有时我想使用动画来隐藏它。然而，这被证明具有挑战性：当我处理可滚动屏幕时，我的 ui 出现了一些“跳跃” - 请参阅帖子末尾。

我的最小示例如下所示：

@Preview
@Composable
fun JumpingBottomBarScreen() {
    var bottomBarVisible by remember { mutableStateOf(false) }

    Scaffold(
        content = { padding ->
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .fillMaxWidth()
                    .background(Color.LightGray)
                    .padding(padding)
            ) {
                (1..20).forEach { Text(text = "Test #$it of 50") }

                Button(
                    onClick = { bottomBarVisible = !bottomBarVisible },
                    content = { Text(if (bottomBarVisible) "Hide Bottom Bar" else "Show Bottom Bar") }
                )

                (21..50).forEach { Text(text = "Test #$it of 50") }
            }
        },
        bottomBar = {
            AnimatedVisibility(
                visible = bottomBarVisible,
                enter = slideInVertically(initialOffsetY = { it }),
                exit = slideOutVertically(targetOffsetY = { it })
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(Color.Red)
                )
            }
        }
    )
}

避免AnimatedVisibility只支持偏移效果更好，但是，我只管理固定高度的底部条，这使得故障安全性大大降低。

bottomBar = {
    val bottomBarOffset by animateDpAsState(targetValue = if (bottomBarVisible) 0.dp else 50.dp)

    Box(
        modifier = Modifier
            .offset(y = bottomBarOffset)
            .fillMaxWidth()
            .height(50.dp)
            .background(Color.Red)
    )
}

我如何干净地做到这一点？我很好，我的屏幕底部的填充比预期的要多。

---

左边/顶部不好，右边/底部好（但高度固定）