Jetpack compose 的状态栏中未显示模态底片稀松布颜色

将视图系统中的应用程序迁移到 Jetpack compose。

在当前应用程序的状态栏上会显示底部的表格稀松布颜色
如何在 Jetpack compose 中重现相同的内容?

使用视图的应用程序屏幕截图

使用 compose 的应用程序屏幕截图

编写代码

val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        // Not relevant
    },
) {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            // Not relevant
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        if (!modalBottomSheetState.isAnimationRunning) {
                            if (modalBottomSheetState.isVisible) {
                                modalBottomSheetState.hide()
                            } else {
                                modalBottomSheetState.show()
                            }
                        }
                    }
                },
            ) {
                Icon(
                    imageVector = Icons.Rounded.Add,
                    contentDescription = "Add",
                )
            }
        },
        modifier = Modifier
            .fillMaxSize(),
    ) { innerPadding ->
        // Not relevant - Nav graph code
    }
}
stack overflow Modal Bottom Sheet scrim color is not shown in status bar in Jetpack compose
原文答案

答案:

作者头像

尝试使用 System UI Controller 库中的 accompanist 来控制 statusBar 颜色和 navigationBar 颜色

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"
// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}
作者头像

在最新版本的 Compose 中,默认情况下在 statusBarColor 文件中设置了一个 Theme.kt 参数。如果您不使用伴奏,请尝试更改该值以获得所需的效果。

作者头像

您可以删除自动昆虫并使状态栏透明:

    WindowCompat.setDecorFitsSystemWindows(window, false)
    window.statusBarColor = android.graphics.Color.TRANSPARENT;

然后画出你的底页,它将进入所有系统栏,包括状态栏

只是不要忘记在需要时为其余视图添加昆虫,它现在在 compose 基础中:

            modifier = Modifier
                                .navigationBarsPadding()
                                .captionBarPadding()
                                .imePadding()
                                .statusBarsPadding(),