Compose导航中屏幕内容提前位移问题：如何固定内容位置？

问题根源确实是嵌套/独立Scaffold导致的布局重排：主界面的Scaffold包含顶部栏、底部导航栏和FAB，而屏幕B自带完整Scaffold。导航切换时，两个Scaffold的栏组件（TopAppBar、BottomBar）的显示/隐藏、高度差异会触发布局尺寸重计算，动画执行前内容区域就发生了偏移，表现为快速上跳/下移。

以下是几种可行的解决方案：

1. 统一Scaffold结构（推荐） #

将共享的栏组件（比如底部导航栏、全局FAB）提取到导航宿主的外层，仅让内容区域参与导航切换。屏幕B的TopAppBar可以通过路由动态切换，避免嵌套Scaffold。

示例代码：

// 外层统一Scaffold，包含全局栏组件
Scaffold(
    topBar = {
        // 根据当前路由显示对应TopAppBar
        when (currentRoute) {
            "main" -> MainTopAppBar()
            "screenB" -> ScreenBTopAppBar()
        }
    },
    bottomBar = { MainBottomNavigationBar() },
    floatingActionButton = { MainFloatingActionButton() }
) { paddingValues ->
    // 导航宿主放在Scaffold的content中，所有屏幕共享padding
    AnimatedNavHost(
        navController = navController,
        startDestination = "main",
        modifier = Modifier.padding(paddingValues)
    ) {
        composable("main") { MainScreenContent() }
        // 屏幕B不再嵌套Scaffold，仅提供内容部分
        composable("screenB") { ScreenBContent() }
    }
}

这种方式从根源上消除了布局重排的触发条件，所有屏幕的内容区域尺寸始终一致，动画过程不会出现跳动。

2. 强制内容区域尺寸固定 #

如果必须保留屏幕B的独立Scaffold，可以通过固定内容区域的尺寸，抵消栏组件带来的布局变化：

• 给两个Scaffold的内容区域添加相同的最小高度/固定高度
• 或者在动画执行期间，通过自定义过渡强制保持内容尺寸不变

示例自定义过渡：

composable(
    route = "main",
    exitTransition = {
        // 淡出动画期间强制保持原尺寸，避免布局重排
        fadeOut(tween(300)) +
            scaleIn(initialScale = 1f, animationSpec = tween(300))
    }
) { MainScreen() }

composable(
    route = "screenB",
    popEnterTransition = {
        fadeIn(tween(300)) +
            scaleIn(initialScale = 1f, animationSpec = tween(300))
    }
) { ScreenB() }

这里通过scaleIn（初始缩放为1）强制内容在动画期间保持原尺寸，阻止布局重排导致的跳动。

3. 同步栏组件高度 #

确保主界面和屏幕B的TopAppBar、BottomBar高度完全一致，这样导航切换时内容区域的padding变化为0，不会触发偏移。可以通过自定义TopAppBar的高度，或者使用相同的组件实现来保证高度统一。

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