Jetpack Compose沉浸式模式：弹窗时阻止系统栏显示的方案

问题核心在于AlertDialog、DropdownMenu这类弹窗组件在显示时，系统会默认恢复系统栏可见性。要在Compose层面解决这个问题，只需在弹窗显示的同时强制重新设置系统栏隐藏状态即可，以下是具体实现方案：

方案1：利用SideEffect在弹窗作用域内强制隐藏系统栏 #

在弹窗的Composable代码块中添加SideEffect，每次弹窗重组时都会执行系统栏隐藏逻辑，覆盖系统默认行为：

val viewModel: YourViewModel = viewModel()
val systemUiController: SystemUiController = rememberSystemUiController()

// 初始设置沉浸式模式
LaunchedEffect(Unit) {
    systemUiController.isStatusBarVisible = false
    systemUiController.isNavigationBarVisible = false
    systemUiController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
}

Scaffold { padding ->
    // 主页面内容...

    // 处理AlertDialog
    if (viewModel.showDialog) {
        AlertDialog(
            onDismissRequest = { viewModel.showDialog = false },
            title = { Text("提示") },
            text = { Text("这是一个弹窗") },
            confirmButton = {
                Button(onClick = { viewModel.showDialog = false }) {
                    Text("确认")
                }
            }
        )
        // 弹窗显示时强制隐藏系统栏
        SideEffect {
            systemUiController.isStatusBarVisible = false
            systemUiController.isNavigationBarVisible = false
        }
    }

    // 处理DropdownMenu
    var dropdownExpanded by remember { mutableStateOf(false) }
    Box(modifier = Modifier.padding(padding)) {
        Button(onClick = { dropdownExpanded = true }) {
            Text("打开下拉菜单")
        }
        DropdownMenu(
            expanded = dropdownExpanded,
            onDismissRequest = { dropdownExpanded = false }
        ) {
            DropdownMenuItem(onClick = { dropdownExpanded = false }) {
                Text("选项1")
            }
            DropdownMenuItem(onClick = { dropdownExpanded = false }) {
                Text("选项2")
            }
            // 下拉菜单显示时强制隐藏系统栏
            SideEffect {
                systemUiController.isStatusBarVisible = false
                systemUiController.isNavigationBarVisible = false
            }
        }
    }
}

方案2：监听弹窗状态，用LaunchedEffect触发隐藏操作 #

如果希望只在弹窗状态变化时执行一次隐藏逻辑（而非每次重组），可以用LaunchedEffect监听弹窗的显示状态变量：

// 监听AlertDialog状态
LaunchedEffect(viewModel.showDialog) {
    if (viewModel.showDialog) {
        systemUiController.isStatusBarVisible = false
        systemUiController.isNavigationBarVisible = false
    }
}

// 监听DropdownMenu状态
LaunchedEffect(dropdownExpanded) {
    if (dropdownExpanded) {
        systemUiController.isStatusBarVisible = false
        systemUiController.isNavigationBarVisible = false
    }
}

原理说明 #

AlertDialog和DropdownMenu属于窗口层级的组件，显示时系统会自动调整系统UI可见性以保证交互可用性。通过在弹窗的组合作用域内显式设置系统栏隐藏，我们可以覆盖系统的默认行为，保持沉浸式状态的一致性。

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