Jetpack Compose在Material颜色方案下的NavigationBar颜色是什么？

Question

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

- Renattele Renattele

Answer 1

在 Material Design 3 中有一个名为 tonalElevation 的东西。在不同的音调高度下，相同的“基础”颜色会有所不同。默认情况下，Surface 的音调高度为 0dp，这意味着背景颜色被直接使用。而 NavigationBar 的音调高度为 3dp，会稍微改变颜色。如果你想强制 NavigationBar 的颜色与 Surface 相同，将其 tonal elevation 改为 0 即可。

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

- Jan Bína

Answer 2

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

MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)

默认情况下，NavigationBar 使用的 ElevationToken 是 Level2（相当于 3dp）。如果您为自己的 NavigationBar 设置了不同的自定义高度，则在此函数中也要设置该高度，并且颜色将对两者都相同。

- DAA

---

对我很有帮助，谢谢。但是，您如何知道NavigationBar是二级导航栏？Google 在哪里有记录文档呢？ - stefan.at.kotlin

如果您访问NavigationBar代码，您将看到tonalElevation的默认值为NavigationBarDefaults.Elevation。在那里，Elevation值是NavigationBarTokens.ContainerElevation。在其中，您会发现该值是ElevationTokens.Level2。我不知道它是否被恰当地记录下来了，我是通过查看类得出的结论。 - DAA

谢谢，喜欢技术的方式 :-) 同时我也找到了文档：https://m3.material.io/styles/elevation/tokens#df721a00-888e-4c5e-bfe1-5d905f167aaa - stefan.at.kotlin

Answer 3

除了更改导航栏的高度之外，您还可以计算颜色，就像在材料组件中一样:

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

- Patrick Lang

---

谢谢！这是一个关于模拟导航栏色调提升的非常有帮助的答案。 - Arthur Khazbs

Answer 4

如果您想在导航栏中使用相同的颜色，例如白色，请尝试以下操作：

容器颜色

NavigationBar(
        containerColor = Color.White
)

点击时没有颜色变化

NavigationBar(
        contentColor = Color.White
)

选中/未选中图标，selectedText，指示器：

NavigationBarItem(
       colors = NavigationBarItemDefaults.colors(
          selectedIconColor = Color.Green,
          unselectedIconColor = Color.Gray,
          selectedTextColor = Color.Transparent,
          indicatorColor = Color.White
       )
)

您还可以在上面更改selectedIconColor和unselectedIconColor颜色为Color.Transparent，并在NavigationBarItem中控制颜色，但是您需要一些逻辑来控制图标和/或标签的选中/未选中颜色。

例如：

NavigationBarItem(
      label = {
         Text(
            text = "Tab A",
            color = Color.White // selected/unselected color logic here
         )
      },
     icon = {
       Icon(
          painter = painterResource(id = imageId),
          contentDescription = destItem.destination.route,
          tint = Color.Green // selected/unselected color logic here,
       )         
     },
 )

请访问下面的链接获取有关Material3导航栏结构的更多信息：https://m3.material.io/components/navigation-bar/specs。

- Pitos

Answer 5

您可以直接使用 NavigationBar 的 containerColor 属性来设置其颜色。只需将其设置为 Color.Transparent，即可获得与您的背景相同的颜色。

NavigationBar(
  containerColor = Color.Transparent
) {
  ...
}

- Ronald Díaz