Jetpack Compose：解决Scaffold顶部栏与页面内容加载不同步问题

你可以通过以下几种方案消除顶部栏和页面内容切换的延迟差：

方案一：绑定导航栈条目生命周期，延迟顶部栏状态更新 #

不要直接在页面中修改pageName，而是利用NavBackStackEntry的生命周期控制顶部栏的显示时机，确保页面完全加载后再同步更新顶部栏：

1. 在每个页面可组合项中，通过当前导航栈条目传递标题信息：

@Composable
fun SomeScreen(navController: NavController) {
    val backStackEntry = remember(navController) { navController.currentBackStackEntry!! }
    // 带顶部栏的页面设置标题，不带的设为null
    LaunchedEffect(Unit) {
        backStackEntry.savedStateHandle["pageTitle"] = "我的页面"
    }
}

@Composable
fun NoTopBarScreen(navController: NavController) {
    val backStackEntry = remember(navController) { navController.currentBackStackEntry!! }
    LaunchedEffect(Unit) {
        backStackEntry.savedStateHandle["pageTitle"] = null
    }
}

2. 在Activity中，监听当前导航栈条目及其生命周期，只有当页面进入RESUMED状态后才更新顶部栏：

val navController = rememberNavController()
// 监听当前导航栈条目
val currentBackStackEntry by navController.currentBackStackEntryAsState()
// 派生顶部栏标题，结合页面生命周期
val pageTitle by remember(currentBackStackEntry) {
    derivedStateOf {
        if (currentBackStackEntry?.lifecycle?.currentState == Lifecycle.State.RESUMED) {
            currentBackStackEntry.savedStateHandle.get<String?>("pageTitle")
        } else {
            // 页面未加载完成时保留原标题
            null
        }
    }
}

Scaffold(
    topBar = {
        pageTitle?.let { title ->
            Row {
                Text(text = title)
            }
        }
    }
) {
    MyNavHost(navController)
}

这样顶部栏只会在页面完全进入就绪状态后才显示/隐藏，和内容加载完成的时机对齐。

方案二：给顶部栏添加过渡动画，视觉上同步 #

如果页面加载延迟无法避免，可以给顶部栏的显示/隐藏添加和页面切换节奏匹配的动画，弱化延迟差带来的割裂感：

val pageName by remember { mutableStateOf("") }
val navController = rememberNavController()
// 定义可见状态，和pageName绑定
val isTopBarVisible by remember { derivedStateOf { pageName.isNotBlank() } }

Scaffold(
    topBar = {
        AnimatedVisibility(
            visible = isTopBarVisible,
            // 设置和页面加载延迟接近的动画时长，比如500ms
            enter = slideInVertically(initialOffsetY = { -it }, animationSpec = tween(500)),
            exit = slideOutVertically(targetOffsetY = { -it }, animationSpec = tween(500))
        ) {
            Row {
                Text(text = pageName)
            }
        }
    }
) {
    MyNavHost(navController, pageName)
}

通过动画时长和页面加载延迟匹配，让顶部栏的显示/隐藏动画和页面内容加载过程同步。

方案三：统一控制导航切换与顶部栏状态 #

在导航跳转时，同时触发顶部栏状态的延迟更新，和页面加载进度绑定：

// 封装导航跳转方法
fun navigateWithTopBar(navController: NavController, route: String, title: String?) {
    navController.navigate(route) {
        launchSingleTop = true
    }
    // 延迟更新标题，匹配页面实际加载时间
    CoroutineScope(Dispatchers.Main).launch {
        delay(500) // 这里的延迟时间和页面实际加载时长一致
        // 这里替换成你更新pageName的逻辑，比如通过ViewModel或者状态容器传递
    }
}

这种方式需要你提前预估页面加载的延迟时间，手动同步顶部栏的更新时机。

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