Android：如何在Jetpack Compose导航中避免Scaffold顶栏重绘？

问题原因 #

你遇到的TopAppBar切换时的退出/进入动画（白闪），本质是因为两个页面的TopAppBar是完全独立的Composable组件——导航切换时，前一个页面的Scaffold和TopAppBar会被销毁，后一个页面的会被重建，所以触发了组件的出场/退场动画。

Compose中的"Key"机制（对应Flutter的Key） #

Jetpack Compose确实有类似Flutter Key的机制，核心是**key函数**：

• 当Compose重组时，会通过key的值来识别组件身份
• 相同key的组件会被复用，而非销毁重建
• 除了key函数，remember也支持传入key参数来保持状态，避免重复初始化

无需状态提升的解决方案 #

不需要将标题状态提升到MainNavigation，只需通过key函数让Compose识别两个TopAppBar为同一组件，从而避免重建动画：

方法1：提取共用TopAppBar组件（推荐） #

将TopAppBar提取为独立Composable，给它设置固定key，每个页面传入对应标题：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SharedTopAppBar(title: String) {
    // 固定key标识这是同一个组件
    key("shared_top_app_bar") {
        TopAppBar(
            title = {
                Text(
                    text = title,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = MaterialTheme.colorScheme.primary
            )
        )
    }
}

然后在页面中调用：

composable("screen1") {
    Scaffold(
        topBar = { SharedTopAppBar("Screen 1") }
    ) { padding ->
        Button(
            onClick = { navController.navigate("screen2") },
            modifier = Modifier.padding(padding)
        ) {
            Text(text = "Switch")
        }
    }
}

composable("screen2") {
    Scaffold(
        topBar = { SharedTopAppBar("Screen 2") }
    ) { padding ->
        Button(
            onClick = { navController.navigate("screen1") },
            modifier = Modifier.padding(padding)
        ) {
            Text(text = "Switch")
        }
    }
}

方法2：直接给每个TopAppBar加key #

如果不想提取组件，也可以直接在每个页面的TopAppBar外层添加固定key：

composable("screen1") {
    Scaffold(
        topBar = {
            key("shared_top_app_bar") {
                TopAppBar(/* 原有配置 */)
            }
        }
    ) { /* 内容 */ }
}

效果说明 #

通过上述方法，导航切换时Compose会复用TopAppBar组件，仅更新标题文本，不会触发销毁/重建的动画，完美解决白闪问题。同时，每个页面仍自主控制标题内容，MainNavigation无需承载额外语义，适合复杂导航图场景。

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