Jetpack Compose中的模态底部表格遮罩颜色在状态栏中未显示。

Question

将一个使用View系统的应用程序迁移到Jetpack Compose。

当前应用程序在状态栏中显示底部表格遮罩颜色。
如何在Jetpack Compose中重现相同的效果？

使用视图的应用程序截图

使用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
    }
}

- Abhimanyu

Answer 1

尝试使用System UI Controller来控制状态栏颜色和导航栏颜色。这个控制器可以在accompanist库中找到。请注意保留HTML标签。

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
}

- Afterglow

Answer 2

您可以移除自动插入并使状态栏透明：

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

然后绘制您的底部表格，它将位于所有系统栏下面，包括状态栏。

只是不要忘记在需要时为其余视图添加昆虫，现在已经在Compose基础中了：

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

- DmitryBorodin

Answer 3

ModalBottomSheet(
    modifier = Modifier
        .imePadding()
        .fillMaxWidth()
        .fillMaxHeight(0.95f),
    sheetState = sheetState,
    containerColor = MaterialTheme.colorScheme.background,
    scrimColor = Color(0x8A000000),
    dragHandle = {},
    windowInsets = WindowInsets(0,0,0,0),
    onDismissRequest = {
        scope.launch {
            sheetState.hide()
        }
    },
) {
    }

使用androidx.compose.material3.ModalBottomSheet，并设置windowInsets = WindowInsets(0,0,0,0)。

- what fck

---

设置WindowInsets非常完美，谢谢！我不明白为什么默认情况下会设置垂直插图。 - undefined

Answer 4

在最新版本的Compose中，有一个名为statusBarColor的参数，默认情况下在Theme.kt文件中设置。如果您没有使用accompanist，请尝试修改该值以实现所需的效果。

- Richard Onslow Roper

Answer 5

如果您正在使用Material3，您可以直接将windowInsets提供给ModalBottomSheet。您可以将它们设置为0，或者保留您喜欢的哪些部分。

例如，如果您只想保留底部的insets，请使用以下代码：

ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = {  },
        modifier = modifier,
        windowInsets = BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom),
    ) {
        // Bottom sheet layout 
    }

- Ana Ilies