Jetpack Compose：部分页面隐藏TopAppBar与Drawer的方案咨询

下面介绍三种不需要手动对比路由字符串的实现方式，让每个页面自主控制TopAppBar、Drawer的显隐状态：

方案1：利用NavBackStackEntry的SavedStateHandle #

每个页面自行声明UI配置，通过当前导航栈条目保存配置，Base页面监听栈条目变化获取配置。

实现步骤： #

1. 定义UI配置数据类

data class ScreenUiConfig(
    val showTopAppBar: Boolean = true,
    val showDrawer: Boolean = true
)

2. 在BaseAuthScreen中监听导航栈并读取配置

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BaseAuthScreen(navController: NavHostController = rememberNavController()) {
    // 监听当前导航栈条目变化
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    
    // 读取页面配置，默认显示所有组件
    val uiConfig = currentBackStackEntry?.savedStateHandle?.get<ScreenUiConfig>("uiConfig") 
        ?: ScreenUiConfig()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = { if (uiConfig.showTopAppBar) TopAppBar(title = { Text("页面标题") }) },
        drawerContent = { if (uiConfig.showDrawer) DrawerContent() },
        bottomBar = { BottomBar(navController = navController) }
    ) { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
        ) {
            AuthGraph(navHostController = navController)
        }
    }
}

3. 在具体页面中设置自定义配置

@Composable
fun LoginScreen(navController: NavHostController) {
    // 获取当前页面的导航栈条目
    val currentEntry = navController.currentBackStackEntry!!
    // 配置：显示TopAppBar，隐藏Drawer
    currentEntry.savedStateHandle["uiConfig"] = ScreenUiConfig(showDrawer = false)
    
    // 页面内容
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text("登录页面")
    }
}

@Composable
fun WelcomeScreen(navController: NavHostController) {
    val currentEntry = navController.currentBackStackEntry!!
    // 配置：隐藏TopAppBar和Drawer
    currentEntry.savedStateHandle["uiConfig"] = ScreenUiConfig(showTopAppBar = false, showDrawer = false)
    
    // 页面内容
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text("欢迎页面")
    }
}

方案2：使用CompositionLocal传递页面配置 #

通过CompositionLocal让页面向上传递UI配置，Base页面读取该值控制组件显隐。

实现步骤： #

1. 定义CompositionLocal和默认配置

val LocalScreenUiConfig = compositionLocalOf { ScreenUiConfig() }

2. 在BaseAuthScreen中读取Local配置

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BaseAuthScreen(navController: NavHostController = rememberNavController()) {
    val uiConfig = LocalScreenUiConfig.current

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = { if (uiConfig.showTopAppBar) TopAppBar(title = { Text("页面标题") }) },
        drawerContent = { if (uiConfig.showDrawer) DrawerContent() },
        bottomBar = { BottomBar(navController = navController) }
    ) { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
        ) {
            AuthGraph(navHostController = navController)
        }
    }
}

3. 在具体页面中提供自定义配置

@Composable
fun LoginScreen(navController: NavHostController) {
    CompositionLocalProvider(
        LocalScreenUiConfig provides ScreenUiConfig(showDrawer = false)
    ) {
        // 页面内容
        Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
            Text("登录页面")
        }
    }
}

@Composable
fun WelcomeScreen(navController: NavHostController) {
    CompositionLocalProvider(
        LocalScreenUiConfig provides ScreenUiConfig(showTopAppBar = false, showDrawer = false)
    ) {
        // 页面内容
        Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
            Text("欢迎页面")
        }
    }
}

方案3：在导航目的地中配置参数 #

在导航Graph里给每个页面添加UI配置参数，Base页面解析当前目的地的参数获取配置。

实现步骤： #

1. 在导航Graph中定义参数

fun AuthGraph(navHostController: NavHostController) {
    NavHost(navController = navHostController, startDestination = "welcome") {
        composable(
            route = "welcome",
            arguments = listOf(
                navArgument("showTopBar") { defaultValue = false },
                navArgument("showDrawer") { defaultValue = false }
            )
        ) {
            WelcomeScreen(navController = navHostController)
        }
        composable(
            route = "login",
            arguments = listOf(
                navArgument("showTopBar") { defaultValue = true },
                navArgument("showDrawer") { defaultValue = false }
            )
        ) {
            LoginScreen(navController = navHostController)
        }
        // 其他页面路由...
    }
}

2. 在BaseAuthScreen中解析参数

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BaseAuthScreen(navController: NavHostController = rememberNavController()) {
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    val showTopAppBar = currentBackStackEntry?.arguments?.getBoolean("showTopBar") ?: true
    val showDrawer = currentBackStackEntry?.arguments?.getBoolean("showDrawer") ?: true

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = { if (showTopAppBar) TopAppBar(title = { Text("页面标题") }) },
        drawerContent = { if (showDrawer) DrawerContent() },
        bottomBar = { BottomBar(navController = navController) }
    ) { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
        ) {
            AuthGraph(navHostController = navController)
        }
    }
}

这三种方案都避免了手动对比路由字符串的操作，让页面的UI配置更内聚、更易维护。

内容的提问来源于stack exchange，提问作者Sergi Poza Paterna