Jetpack Compose中如何让NavigationDrawer位于TopBar下方、BottomBar上方？

问题核心是你把ModalNavigationDrawer放在了Scaffold的content区域内，还加上了Scaffold自动生成的paddingValues，导致抽屉被限制在topBar和bottomBar之间的区域，自然就显示在两者下方。

调整层级结构就能解决，把Scaffold嵌套进ModalNavigationDrawer里，让抽屉覆盖在Scaffold的content区域上方，同时被topBar遮挡、在bottomBar上方截止：

@Composable
fun MainScreen() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    // 把ModalNavigationDrawer作为最外层容器
    ModalNavigationDrawer(
        gesturesEnabled = true,
        drawerContent = { DrawerContent() },
        drawerState = drawerState
    ) {
        // 整个Scaffold放在抽屉的content参数中
        Scaffold(
            topBar = {
                MyTopAppBar {
                    scope.launch {
                        drawerState.open()
                    }
                }
            },
            bottomBar = {
                MyBottomAppBar(modifier = Modifier.height(65.dp)) {
                    val modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight()

                    BottomAppBarItem(
                        "Calls",
                        Icons.Filled.Call,
                        false,
                        modifier
                    )
                    BottomAppBarItem(
                        "Search",
                        Icons.Filled.Search,
                        true,
                        modifier
                    )
                    BottomAppBarItem(
                        "Contacts",
                        Icons.Filled.AccountBox,
                        false,
                        modifier
                    )
                }
            }
        ) { paddingValues ->
            Surface(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                color = MaterialTheme.colorScheme.background
            ) {
                // 这里放原本的页面内容
            }
        }
    }
}

关键改动说明： #

• 层级反转：原来的结构是Scaffold -> ModalNavigationDrawer，现在改成ModalNavigationDrawer -> Scaffold，这样抽屉的层级高于Scaffold的content区域，但低于topBar（因为topBar是Scaffold的一部分，属于抽屉content内的上层元素）
• 保留paddingValues：Scaffold的content区域依然使用paddingValues，确保页面内容不会被topBar和bottomBar遮挡，而抽屉会自动适配到topBar下方、bottomBar上方的空间

这样调整后，抽屉就会显示在topBar下方，同时停在bottomBar上方，符合你的需求。

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