如何在Jetpack Compose中实现单屏独立TopAppBar并解决预测返回问题

核心思路是不要在父级统一控制栏的显隐，而是将共享Scaffold的主屏幕和独立Scaffold的表单屏幕拆分为不同的导航层级，让每个屏幕的Scaffold归属自身，这样预测返回的过渡动画会自然包含完整的页面元素。

步骤1：定义路由结构 #

先明确各页面的路由，区分主屏幕和表单屏幕：

sealed class Screen(val route: String) {
    // 4个主屏幕路由
    object Home : Screen("home")
    object Discover : Screen("discover")
    object Cart : Screen("cart")
    object Mine : Screen("mine")
    // 表单屏幕路由
    object ShoppingListForm : Screen("shopping_list_form")
}

步骤2：搭建根导航Host #

根NavHost中，将主屏幕打包为一个嵌套导航图，表单屏幕作为独立的顶级目的地：

@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "main_graph" // 启动时先进入主屏幕导航图
    ) {
        // 主屏幕嵌套导航图：所有主屏幕共享同一个Scaffold
        navigation(startDestination = Screen.Home.route, route = "main_graph") {
            composable(Screen.Home.route) {
                MainSharedScaffold(navController) {
                    HomeScreenContent()
                }
            }
            composable(Screen.Discover.route) {
                MainSharedScaffold(navController) {
                    DiscoverScreenContent()
                }
            }
            composable(Screen.Cart.route) {
                MainSharedScaffold(navController) {
                    CartScreenContent()
                }
            }
            composable(Screen.Mine.route) {
                MainSharedScaffold(navController) {
                    MineScreenContent()
                }
            }
        }

        // 表单屏幕：独立使用Scaffold
        composable(Screen.ShoppingListForm.route) {
            ShoppingListFormScreen(navController)
        }
    }
}

步骤3：实现主屏幕共享Scaffold #

创建一个可复用的Scaffold组件，包含共享的TopAppBar、BottomAppBar和跳转表单的FAB：

@Composable
fun MainSharedScaffold(
    navController: NavHostController,
    content: @Composable () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("主应用标题") })
        },
        bottomBar = {
            BottomAppBar {
                // 底部导航按钮，仅在主屏幕间切换
                IconButton(onClick = { navController.navigate(Screen.Home.route) }) {
                    Icon(Icons.Default.Home, contentDescription = "首页")
                }
                IconButton(onClick = { navController.navigate(Screen.Discover.route) }) {
                    Icon(Icons.Default.Explore, contentDescription = "发现")
                }
                IconButton(onClick = { navController.navigate(Screen.Cart.route) }) {
                    Icon(Icons.Default.ShoppingCart, contentDescription = "购物车")
                }
                IconButton(onClick = { navController.navigate(Screen.Mine.route) }) {
                    Icon(Icons.Default.Person, contentDescription = "我的")
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                navController.navigate(Screen.ShoppingListForm.route)
            }) {
                Icon(Icons.Default.Add, contentDescription = "新建清单")
            }
        }
    ) { paddingValues ->
        Box(modifier = Modifier.padding(paddingValues)) {
            content()
        }
    }
}

步骤4：表单屏幕使用独立Scaffold #

在表单屏幕内部直接定义专属的Scaffold，无需依赖父级的栏控制：

@Composable
fun ShoppingListFormScreen(navController: NavHostController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("新建购物清单") },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                    }
                }
            )
        }
        // 不设置bottomBar，自然隐藏底部导航
    ) { paddingValues ->
        Box(modifier = Modifier.padding(paddingValues)) {
            // 表单内容区域
            Column(modifier = Modifier.padding(16.dp)) {
                Text("填写购物清单内容")
                // 输入框、提交按钮等表单元素
            }
        }
    }
}

为什么这样解决问题？ #

每个页面的Scaffold属于自身导航目的地的一部分，预测返回时，系统会完整处理两个页面（含各自Scaffold）的过渡动画：返回过程中，表单的Scaffold会逐渐退出，主屏幕的Scaffold会逐渐显示，不会出现仅显示中间内容的断层问题。

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