Android Jetpack Compose中ModalDrawer无法覆盖BottomNavigation的解决方法

问题核心是ModalDrawer的层级低于BottomNavigation——当前抽屉嵌套在NavHost的单个页面中，而BottomNavigation处于Column的独立层级，导致抽屉展开时无法覆盖底部导航栏。

修改方案 #

将ModalDrawer提升为整个布局的根容器，包裹住包含NavHost和BottomNavigation的Column，让抽屉层级高于所有页面元素，展开时即可完全覆盖底部导航栏。

修改后的完整代码 #

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    val puppi by viewModel.uiState.collectAsState()
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    val submit = {
        scope.launch {
            drawerState.open()
        }
        Unit
    }

    // 将ModalDrawer移至最外层，包裹全部布局
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = { DrawerView(drawerState) },
        content = {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                NavHost(
                    navController = navController,
                    startDestination = NavigationItem.HOME.route,
                    modifier = Modifier.weight(1f)
                ) {
                    composable(NavigationItem.HOME.route) {
                        Column(
                            modifier = Modifier.fillMaxSize()
                        ) {
                            TopAppBar(
                                title = { Text(text = "Test") },
                                navigationIcon = {
                                    IconButton(onClick = {
                                        scope.launch {
                                            drawerState.open()
                                        }
                                    }) {
                                        Icon(Icons.Filled.Menu, contentDescription = "Open drawer")
                                    }
                                },
                                backgroundColor = Color.White,
                                actions = {
                                    IconButton(onClick = { /* do something */ }) {
                                        Icon(Icons.Filled.Share, contentDescription = "Share text")
                                    }
                                }
                            )
                            ListFormFirst(puppi.user)
                        }
                    }
                    composable(NavigationItem.CRYPT.route) {
                        // 填充对应页面内容
                    }
                }

                BottomNavigation(backgroundColor = Color.White) {
                    val backStack by navController.currentBackStackEntryAsState()
                    val current = backStack?.destination?.route

                    NavigationItem.values().forEach { item ->
                        BottomNavigationItem(
                            selected = current == item.route,
                            onClick = {
                                navController.navigate(item.route) {
                                    popUpTo(id = 0) {
                                        saveState = true
                                    }
                                    launchSingleTop = true
                                    restoreState = true
                                }
                            },
                            icon = { Icon(item.icon, null) },
                            label = {
                                Text(
                                    text = item.label,
                                    maxLines = 1
                                )
                            },
                        )
                    }
                }
            }
        }
    )
}

关键改动说明 #

1. 层级重构：把ModalDrawer从单个页面组件中移出，作为整个MainScreen的根布局，确保其内容区域包含NavHost和BottomNavigation，抽屉展开时会覆盖所有内部元素。
2. 触发逻辑修正：TopAppBar菜单按钮点击时，直接通过coroutine scope控制drawerState的开关逻辑，保证抽屉正常响应。

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