Jetpack Compose 的狀態欄中未顯示模態底板稀松布顏色

Question

將視圖系統中的應用程序遷移到 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
    }
}

Answer 1

嘗試使用伴奏庫中的System UI Controller來控制 statusBar Color 和 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
}

Answer 2

在最新版本的 Compose 中，默認情況下在Theme.kt文件中設置了一個statusBarColor參數。 如果您不使用伴奏，請嘗試更改該值以獲得所需的效果。

Answer 3

您可以刪除自動昆蟲並使狀態欄透明：

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

然后繪制你的底片，它會在所有系統欄包括狀態欄下顯示 go

只是不要忘記在需要時為視圖的 rest 添加昆蟲，它現在在 compose foundation 中：

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