Material 配色方案中 Jetpack Compose 中导航栏的颜色是什么？

Question

当我试图强制NavigationBar使用MaterialTheme.colorScheme.surface颜色时（请参阅材料 3 指南），应用程序的背景颜色和颜色NavigationBar不同。示例： 的颜色NavigationBar为#f1edf7，但背景颜色为#fffbfe。背景应用程序颜色也是MaterialTheme.colorScheme.surface如此。

Answer 1

在材料设计3中有一个东西。tonalElevation相同的“基”颜色在不同的色调高度下是不同的。默认情况下，表面的色调高度为 0dp，这意味着按原样使用背景颜色。NavigationBar色调高度为 3dp，会稍微改变颜色。如果您想强制NavigationBar为精确的表面颜色，请将其色调高度更改为 0。

请参阅： https: //cs.android.com/androidx/platform/frameworks/support/+/071c483c7223af673a5c0145e2fee7b0c94af1fd :compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=501

Answer 2

复制颜色的正确方法NavigationBar是使用幕后使用的相同函数来计算它：

MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)

默认ElevationToken使用的NavigationBar是Level2，相当于 3dp。如果您为 的 自定义不同的高度NavigationBar，也在此函数中进行设置，并且两者的颜色将相同。

Answer 3

您还可以像在材质组件中一样计算颜色，而不是更改导航栏的高度：

activity.window.navigationBarColor = colorScheme.primary.copy(alpha = 0.08f).compositeOver(colorScheme.surface.copy()).toArgb()