Jetpack Compose隐藏顶/底栏时如何避免屏幕内容延迟适配问题

问题复现代码 #

页面实现：

@Composable
fun Screen1(
    toScreen2:() -> Unit
) {
    Box(
        modifier = Modifier.fillMaxSize().border(4.dp, Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Screen 1")
        Button(onClick = { toScreen2() }) {
            Text(text = "To Screen 2")
        }
    }
}

@Composable
fun Screen2(
    toScreen1:() -> Unit
) {
    Box(
        modifier = Modifier.fillMaxSize().border(4.dp, Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Screen 2")
        Button(onClick = { toScreen1() }) {
            Text(text = "To Screen 1")
        }
    }
}

可控制显隐的顶部栏：

@Composable
fun MyTopBar(
    currentRoute: String?
) {
    val isVisible = currentRoute == "Screen1"
    AnimatedVisibility(
        visible = isVisible,
        enter = fadeIn(),
        exit = fadeOut()
    ) {
        TopAppBar(backgroundColor = Color.Red){}
    }
}

整体Scaffold布局：

val scaffoldState = rememberScaffoldState()
val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
Scaffold(
    modifier = Modifier
        .fillMaxSize(),
    scaffoldState = scaffoldState,
    topBar = { MyTopBar(currentRoute) },
    backgroundColor = Color.White
){
    NavHost(
        navController = navController,
        startDestination = "Screen1"
    ){
        composable("Screen1"){
            Screen1(toScreen2 = { navController.navigate("Screen2") })
        }
        composable("Screen2"){
            Screen2(toScreen1 = { navController.navigate("Screen1") })
        }
    }
}

问题现象：切换页面时顶部栏会先执行淡入淡出动画，页面内容的位置调整明显滞后于顶部栏的显隐速度，两者不同步。

问题原因 #

出现适配滞后的核心原因是AnimatedVisibility的动画配置问题：

• 仅配置了fadeIn()/fadeOut()透明度动画，没有配置尺寸变化动画
• 当顶部栏需要隐藏时，fadeOut()执行的整个过程中，TopAppBar始终占据完整的顶部栏高度，Scaffold给内容区的顶部padding不会发生变化
• 等透明度动画完全结束后，AnimatedVisibility才会将内部的TopAppBar从布局中移除，顶部栏高度瞬间变为0，Scaffold此时才会重新计算内容区位置，导致内容调整比顶部栏消失慢一拍。

解决方案 #

根据需要的交互效果选择对应实现即可：

方案1：同步尺寸与透明度动画（保留过渡效果，完全同步） #

给AnimatedVisibility的进出场添加上下展开/收缩动画，保证透明度动画和尺寸动画的时长、插值器完全一致，动画过程中顶部栏高度会随透明度同步变化，Scaffold的内容padding也会实时跟随调整，不会出现错位。
修改MyTopBar代码即可：

@Composable
fun MyTopBar(
    currentRoute: String?
) {
    val isVisible = currentRoute == "Screen1"
    // 统一动画规格，保证透明度和尺寸动画完全同步
    val animationSpec = tween<Float>(durationMillis = 300) // 可按需调整动画时长
    AnimatedVisibility(
        visible = isVisible,
        enter = fadeIn(animationSpec = animationSpec) + expandVertically(animationSpec = animationSpec),
        exit = fadeOut(animationSpec = animationSpec) + shrinkVertically(animationSpec = animationSpec)
    ) {
        TopAppBar(backgroundColor = Color.Red){}
    }
}

方案2：无动画即时切换（不需要过渡效果时使用） #

如果不需要顶部栏的淡入淡出效果，希望切换路由时顶部栏和内容位置瞬间完成调整，直接去掉AnimatedVisibility，根据路由判断是否渲染顶部栏即可：

@Composable
fun MyTopBar(
    currentRoute: String?
) {
    val isVisible = currentRoute == "Screen1"
    if (isVisible) {
        TopAppBar(backgroundColor = Color.Red){}
    }
}

这种方式下切换路由时，顶部栏会瞬间消失/出现，内容区域的位置也会瞬间完成适配，没有任何延迟。

方案3：固定高度淡入淡出（不希望顶部栏有收缩效果时使用） #

如果希望顶部栏始终保持固定高度，只做透明度变化，同时内容区不要出现滞后跳转，可以手动用动画状态同步控制顶部栏透明度和内容区的顶部padding，不依赖Scaffold自动计算的contentPadding：

val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
val isTopBarVisible = currentRoute == "Screen1"
// 统一动画规格
val animSpec = tween<Float>(durationMillis = 300)
// 同步控制顶部栏透明度和内容顶部偏移
val topBarAlpha by animateFloatAsState(
    targetValue = if (isTopBarVisible) 1f else 0f,
    animationSpec = animSpec
)
val topBarHeight = 56.dp // Material Design顶部栏默认高度，可根据实际实现调整
val contentTopPadding by animateDpAsState(
    targetValue = if (isTopBarVisible) topBarHeight else 0.dp,
    animationSpec = animSpec
)

Scaffold(
    modifier = Modifier.fillMaxSize(),
    scaffoldState = rememberScaffoldState(),
    // 顶部栏始终占位，仅修改透明度
    topBar = {
        TopAppBar(
            modifier = Modifier.alpha(topBarAlpha),
            backgroundColor = Color.Red
        ){}
    },
    backgroundColor = Color.White
){
    // 手动给内容区设置带动画的padding
    Box(modifier = Modifier.padding(top = contentTopPadding)) {
        NavHost(
            navController = navController,
            startDestination = "Screen1"
        ){
            composable("Screen1"){
                Screen1(toScreen2 = { navController.navigate("Screen2") })
            }
            composable("Screen2"){
                // 返回上一页建议用popBackStack，避免返回栈堆积实例
                Screen2(toScreen1 = { navController.popBackStack() })
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者commandiron