Android Jetpack Compose：如何设置子页面TopAppBar的标题与按钮

针对你遇到的问题，核心思路是共享同一个Scaffold的TopAppBar，通过状态动态更新其标题和操作按钮，类比iOS中通过navigationController配置navigationItem的方式，下面是两种可行的实现方案：

1. 基于ViewModel的状态管理（推荐） #

这种方式更灵活，适合复杂页面的状态传递，每个标签页的导航栈对应独立的ViewModel来管理TopAppBar状态：

步骤1：定义TopAppBar状态类 #

data class TopAppBarState(
    val title: String = "首页",
    val actions: @Composable () -> Unit = {}
)

步骤2：创建导航栈对应的ViewModel #

class HomeNavViewModel : ViewModel() {
    // 用StateFlow存储TopAppBar状态，支持生命周期感知
    val topAppBarState = MutableStateFlow(TopAppBarState())

    fun updateTopAppBar(newState: TopAppBarState) {
        topAppBarState.value = newState
    }
}

步骤3：在首页导航栈中绑定状态与TopAppBar #

@Composable
fun HomeNavHostScreen(navController: NavHostController) {
    val viewModel = viewModel<HomeNavViewModel>()
    val topAppBarState by viewModel.topAppBarState.collectAsStateWithLifecycle()

    // 整个导航栈共享这一个Scaffold
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(topAppBarState.title) },
                actions = topAppBarState.actions
            )
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = "home",
            modifier = Modifier.padding(paddingValues)
        ) {
            composable("home") {
                // 进入首页时重置TopAppBar状态
                LaunchedEffect(Unit) {
                    viewModel.updateTopAppBar(TopAppBarState(title = "首页"))
                }
                HomeScreen(onNavigateToDetail = {
                    navController.navigate("detail")
                })
            }
            composable("detail") {
                // 进入详情页时更新TopAppBar
                LaunchedEffect(Unit) {
                    viewModel.updateTopAppBar(
                        TopAppBarState(
                            title = "商品详情",
                            actions = {
                                IconButton(onClick = { /* 分享逻辑 */ }) {
                                    Icon(Icons.Filled.Share, contentDescription = "分享")
                                }
                            }
                        )
                    )
                }
                DetailScreen(onBackClick = {
                    navController.popBackStack()
                })
            }
        }
    }
}

2. 基于当前导航目的地的直接配置 #

如果页面逻辑简单，也可以直接通过当前导航目的地的路由来判断并配置TopAppBar：

@Composable
fun HomeNavHostScreen(navController: NavHostController) {
    // 获取当前导航栈的条目
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = currentBackStackEntry?.destination?.route

    // 根据当前路由动态生成标题和操作按钮
    val topAppBarTitle = when(currentRoute) {
        "home" -> "首页"
        "detail" -> "商品详情"
        else -> "默认标题"
    }

    val topAppBarActions = @Composable {
        when(currentRoute) {
            "detail" -> {
                IconButton(onClick = { /* 收藏逻辑 */ }) {
                    Icon(Icons.Filled.Favorite, contentDescription = "收藏")
                }
            }
            else -> {}
        }
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(topAppBarTitle) },
                actions = topAppBarActions
            )
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = "home",
            modifier = Modifier.padding(paddingValues)
        ) {
            composable("home") {
                HomeScreen(onNavigateToDetail = { navController.navigate("detail") })
            }
            composable("detail") {
                DetailScreen(onBackClick = { navController.popBackStack() })
            }
        }
    }
}

适配多标签页的独立状态 #

因为每个底部标签有独立的NavHostController，只需给每个标签页的导航栈配置对应的ViewModel或状态逻辑即可，切换底部标签时，对应的导航栈会自动恢复之前的TopAppBar状态。

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