Android Compose：如何根据导航抽屉选中屏幕实现不同TopAppBar

不需要给每个屏幕单独创建Scaffold——这么做不仅会重复编写抽屉逻辑，还容易导致状态不一致。正确的做法是保留主Scaffold在MainScreen统一管理抽屉和导航框架，然后根据当前活跃的路由动态切换TopAppBar组件。

步骤1：拆分独立的TopAppBar组件 #

先把三个屏幕的TopAppBar拆成单独的可组合函数，各自实现对应UI，同时接收通用参数（比如导航图标点击事件、标题）：

// Screen1的简易TopAppBar
@Composable
fun Screen1TopAppBar(title: String, onNavIconClick: () -> Unit) {
    TopAppBar(
        title = { Text(title) },
        navigationIcon = {
            IconButton(onClick = onNavIconClick) {
                Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
            }
        }
    )
}

// Screen2带Tabs的顶部区域（TopAppBar + Tabs组合）
@Composable
fun Screen2TopBar(
    title: String,
    onNavIconClick: () -> Unit,
    tabs: List<String>,
    selectedTabIndex: Int,
    onTabSelected: (Int) -> Unit
) {
    Column {
        TopAppBar(
            title = { Text(title) },
            navigationIcon = {
                IconButton(onClick = onNavIconClick) {
                    Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
                }
            }
        )
        TabRow(selectedTabIndex = selectedTabIndex) {
            tabs.forEachIndexed { index, tabTitle ->
                Tab(
                    text = { Text(tabTitle) },
                    selected = selectedTabIndex == index,
                    onClick = { onTabSelected(index) }
                )
            }
        }
    }
}

// Screen3带额外操作按钮的TopAppBar
@Composable
fun Screen3TopAppBar(
    title: String,
    onNavIconClick: () -> Unit,
    onAction1Click: () -> Unit,
    onAction2Click: () -> Unit
) {
    TopAppBar(
        title = { Text(title) },
        navigationIcon = {
            IconButton(onClick = onNavIconClick) {
                Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
            }
        },
        actions = {
            IconButton(onClick = onAction1Click) {
                Icon(Icons.Default.Search, contentDescription = "搜索")
            }
            IconButton(onClick = onAction2Click) {
                Icon(Icons.Default.Share, contentDescription = "分享")
            }
        }
    )
}

步骤2：在主Scaffold中动态切换TopAppBar #

在MainScreen里保留全局Scaffold，通过NavController获取当前路由，根据路由选择对应的TopAppBar：

@Composable
fun MainScreen(navController: NavController) {
    val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))
    val scope = rememberCoroutineScope()

    // 获取当前活跃的路由
    val currentRoute = navController.currentBackStackEntry?.destination?.route

    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {
            // 抽屉内容只实现一次，所有屏幕共享
            DrawerContent(navController = navController)
        },
        topBar = {
            when(currentRoute) {
                "screen1" -> Screen1TopAppBar(
                    title = "屏幕1",
                    onNavIconClick = { scope.launch { scaffoldState.drawerState.open() } }
                )
                "screen2" -> {
                    // 用remember管理Tabs选中状态，也可以放到ViewModel中全局共享
                    val selectedTabIndex = remember { mutableStateOf(0) }
                    Screen2TopBar(
                        title = "屏幕2",
                        onNavIconClick = { scope.launch { scaffoldState.drawerState.open() } },
                        tabs = listOf("标签1", "标签2", "标签3"),
                        selectedTabIndex = selectedTabIndex.value,
                        onTabSelected = { selectedTabIndex.value = it }
                    )
                }
                "screen3" -> Screen3TopAppBar(
                    title = "屏幕3",
                    onNavIconClick = { scope.launch { scaffoldState.drawerState.open() } },
                    onAction1Click = { /* 处理搜索逻辑 */ },
                    onAction2Click = { /* 处理分享逻辑 */ }
                )
                else -> Screen1TopAppBar( // 默认兜底
                    title = "默认标题",
                    onNavIconClick = { scope.launch { scaffoldState.drawerState.open() } }
                )
            }
        },
        content = { padding ->
            NavHost(
                navController = navController,
                startDestination = "screen1",
                modifier = Modifier.padding(padding)
            ) {
                composable("screen1") { Screen1Content() }
                composable("screen2") { 
                    val selectedTabIndex = remember { mutableStateOf(0) }
                    Screen2Content(selectedTabIndex = selectedTabIndex.value)
                }
                composable("screen3") { Screen3Content() }
            }
        }
    )
}

关键说明 #

• 抽屉逻辑仅在主Scaffold中实现一次，所有屏幕共享同一个抽屉状态，不会出现丢失或不一致的问题。
• Screen2的Tabs和Pager联动：Tabs放在顶部区域，Pager作为Screen2的核心内容，通过selectedTabIndex状态保持UI同步，复杂场景下可将状态迁移至ViewModel实现全局共享。

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