Какого цвета панель навигации в Jetpack Compose в цветовой схеме материала?

Question

Когда я пытаюсь заставить быть цветным (см. Руководство по материалу 3 ), цвет фона приложения и цвет отличаются. Пример: цвет NavigationBar является #f1edf7но цвет фона #fffbfe. Цвет фона приложения MaterialTheme.colorScheme.surfaceслишком.

Answer 1

Есть вещь под названием tonalElevationв материальном дизайне 3. Один и тот же «базовый» цвет отличается на разной тональной высоте. Поверхность по умолчанию имеет тональную высоту 0dp, что означает, что цвет фона используется как есть. имеет тональную высоту 3dp, что немного меняет цвет. Если вы хотите заставить NavigationBarчтобы точно соответствовать цвету поверхности, измените его тональную высоту на 0.

См. это: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=460?q=surfaceColorAtElevation&sq=

Answer 2

Правильный способ воспроизвести цвет — использовать ту же функцию, которая используется за кулисами для его вычисления:

      MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)

По умолчаниюElevationTokenиспользуется дляLevel2, что эквивалентно 3dp. Если вы установите пользовательскую другую высоту для вашегоNavigationBar, установите его тоже в этой функции и цвет будет одинаковым для обоих.

Answer 3

Вместо изменения высоты панели навигации вы также можете рассчитать цвет, как это будет сделано в компоненте материала:

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

Answer 4

Если вам нужен тот же цвет, например, белый в панели навигации, попробуйте следующее:

Цвет контейнера

      NavigationBar(
        containerColor = Color.White
)

Не меняет цвет при нажатии

      NavigationBar(
        contentColor = Color.White
)

Выбранный/не выбранный значок, выделенный текст, индикатор:

      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.

Answer 5

Вы можете напрямую установить цвет NavigationBar, используя егоcontainerColorсвойство. Просто установите его наColor.Transparentчтобы получить тот же цвет, что и ваш фон.

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