Jetpack составляет нижнюю панель приложения темного цвета

Question

Я пытаюсь установить для панели навигации тот же цвет, что и нижняя панель приложения, но я не понимаю, откуда берется цвет для панели приложения с темной темой. Похоже, так и должно быть, но я использую systemUiController.setNavigationBarColor(color = MaterialTheme.colors.primarySurface)цвет не такой, как на панели приложения. Здесь вы видите пример, когда оба параметра установлены на MaterialTheme.colors.primarySurface.

Он отлично работает для светлой темы, но не для темной темы.

Итак, откуда берется цвет панели приложений темной темы?

Answer 1

Это происходит из-за того, что в темном режиме применен elevationOverlay . Вы можете предоставить null в виде LocalElevationOverlay не иметь ElevationOverlay применяемый.

      CompositionLocalProvider(LocalElevationOverlay provides null) {
        BottomAppBar { /* .... */. }
}

Answer 2

Добавление объяснения к ответу Габриэле

Например, в BottomNavigation у нас есть этот код

      @Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .height(BottomNavigationHeight)
                .selectableGroup(),
            horizontalArrangement = Arrangement.SpaceBetween,
            content = content
        )
    }
}

Если мы перейдем к атрибуту высоты поверхности перед созданием компонента Row для размещения значков навигации, мы увидим это.

      @Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    val absoluteElevation = LocalAbsoluteElevation.current + elevation
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalAbsoluteElevation provides absoluteElevation
    ) {
        Box(
            modifier = modifier
                .surface(
                    shape = shape,
                    backgroundColor = surfaceColorAtElevation(
                        color = color,
                        elevationOverlay = LocalElevationOverlay.current,
                        absoluteElevation = absoluteElevation
                    ),
                    border = border,
                    elevation = elevation
                )

Здесь мы можем видеть этоelevationOverlay = LocalElevationOverlay.currentиспользуется для определения наложения нижней навигации, и это потому, что нам нужно знать о темной или светлой теме, поскольку высоты в темных темах не так сильно заметны.

Прочтите https://developer.android.com/reference/kotlin/androidx/compose/material/ElevationOverlay.