Jetpack Compose中Modal Navigation Drawer使用方式咨询

两种实现方式都可行，不存在绝对的对错，核心判断依据是你的项目复杂度和后续扩展需求：

方案一：状态切换更新content内容 #

这个方案不需要引入导航框架，适合轻量场景：

• 适用场景：所有抽屉入口对应的页面平级、无深层子页面跳转需求、整体逻辑简单，比如工具类应用的首页、收藏、设置、关于这类常驻入口
• 实现逻辑：用状态变量保存当前选中的抽屉项，内容区直接根据状态值渲染对应composable，点击抽屉项时仅更新选中状态、关闭抽屉即可
• 优势：代码量少，无导航栈管理成本，页面切换无额外开销
• 劣势：后续如果要给页面加二级/三级跳转、支持返回键回退上一个选中页、配置深链跳转，状态管理会非常混乱，维护成本陡增

注意：如果选这个方案，记得给选中状态做持久化，避免屏幕旋转、进程回收后选中态重置

基础实现参考代码：

// 定义抽屉导航项枚举
enum class AppDrawerDest {
    HOME, FAVORITES, SETTINGS, ABOUT
}

@Composable
fun AppScaffold() {
    var currentSelected by rememberSaveable { mutableStateOf(AppDrawerDest.HOME) }
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                // 首页项
                NavigationDrawerItem(
                    label = { Text("首页") },
                    selected = currentSelected == AppDrawerDest.HOME,
                    onClick = {
                        currentSelected = AppDrawerDest.HOME
                        scope.launch { drawerState.close() }
                    }
                )
                // 收藏、设置、关于项逻辑和首页一致
            }
        }
    ) {
        // 内容区根据选中状态渲染对应页面
        when (currentSelected) {
            AppDrawerDest.HOME -> HomePage()
            AppDrawerDest.FAVORITES -> FavoritesPage()
            AppDrawerDest.SETTINGS -> SettingsPage()
            AppDrawerDest.ABOUT -> AboutPage()
        }
    }
}

方案二：导航到独立composable页面 #

这个方案是正式项目的首选推荐：

• 适用场景：项目有后续扩展需求、页面存在多层级跳转、需要支持返回栈逻辑/深链跳转/统一转场动画、需要和底部导航/顶部应用栏等其他导航组件联动
• 实现逻辑：配合Compose Navigation（或其他你使用的导航框架），将每个抽屉入口配置为独立路由目的地，点击抽屉项时通过NavController导航到对应路由即可，注意配置launchSingleTop = true和popUpTo规则，避免重复往返回栈塞同一个页面
• 优势：导航逻辑全局统一，后续新增页面、调整跳转逻辑不需要修改抽屉组件的基础代码，返回键行为符合用户预期，也方便实现权限拦截、深链跳转等通用能力
• 劣势：前期需要额外配置路由表、处理返回栈复用逻辑，初始代码量稍高

预期实现效果参考：

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