Jetpack Compose导航抽屉未覆盖状态栏的问题解决方法

当然可以实现！我之前也碰到过这个问题，调整几个关键配置就能搞定，下面是具体的操作步骤：

步骤1：配置Activity让布局延伸到状态栏 #

首先在你的主Activity中，设置窗口允许布局延伸到状态栏区域，同时把状态栏设为透明，这样抽屉的背景就能自然覆盖上去：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 允许布局延伸到状态栏和导航栏下方
        window.setFlags(
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
        )
        // 将状态栏设为透明
        window.statusBarColor = Color.TRANSPARENT
        
        // 初始化WindowInsetsController，用于控制状态栏图标颜色
        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        // 默认设置状态栏图标为深色（根据你的主内容背景调整，比如主内容是浅色就用深色图标）
        windowInsetsController.isAppearanceLightStatusBars = true

        setContent {
            YourAppTheme {
                // 这里放置你的Scaffold和导航代码
            }
        }
    }
}

步骤2：调整Scaffold和抽屉的布局逻辑 #

接下来，在承载Scaffold的Composable中，我们需要根据抽屉的开关状态切换状态栏图标颜色（避免抽屉打开时图标和背景冲突），同时确保主内容区域不会被状态栏遮挡：

@Composable
fun MainScreen(navController: NavController) {
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState()
    val windowInsetsController = rememberWindowInsetsController()

    // 监听抽屉状态，动态切换状态栏图标颜色
    LaunchedEffect(scaffoldState.drawerState.isOpen) {
        // 因为你的抽屉背景是白色，所以抽屉打开时保持图标为深色
        // 如果抽屉背景是深色，就把这里设为false（切换为浅色图标）
        windowInsetsController.isAppearanceLightStatusBars = scaffoldState.drawerState.isOpen
    }

    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {
            // 你的抽屉组件不需要额外加statusBarsPadding，让它自然延伸到状态栏区域
            Drawer(scope = scope, scaffoldState = scaffoldState, navController = navController)
        },
        content = { innerPadding ->
            // 主内容区域必须添加statusBarsPadding，避免内容被状态栏遮挡
            NavHost(
                navController = navController,
                startDestination = NavDrawerItem.Home.route,
                modifier = Modifier
                    .padding(innerPadding)
                    .statusBarsPadding()
            ) {
                // 你的各个导航目的地配置
            }
        }
    )
}

步骤3：优化抽屉的顶部内容（可选） #

因为抽屉现在延伸到了状态栏，顶部的Logo可能会被状态栏图标遮挡，所以可以给Drawer的容器添加自动适配状态栏高度的padding：

修改你Drawer组件里的Column：

Column(
    modifier = Modifier
        .background(colorResource(id = R.color.white))
        .fillMaxSize()
        // 添加状态栏padding，避免内容被状态栏图标遮挡
        .windowInsetsPadding(WindowInsets.statusBars)
) {
    // 原来的Image、Spacer等内容...
}

这样调整后，你的导航抽屉就能完美覆盖状态栏了！

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