BottomNavigation не показывает выбранные цвета

Как уже упоминалось в комментариях, это вызвано смешиванием компонентов Compose Материала 2 и Материала 3. Однако я настоятельно советую не использовать ответ на связанный вопрос: он понижает уровень ваших компонентов Материала 3 до Материала 2. Поскольку вы также используете других компонентов Материала 3 это неизбежно приведет к дальнейшим осложнениям.

Вместо этого удалите все компоненты Material 2 в своем приложении и полностью полагайтесь на Material 3. Просмотрите файлы Gradle (или каталог версий, если вы его используете) на предмет любых зависимостей, которые начинаются с androidx.compose.material:. Они предоставляют старые компоненты Material 2. Удалите их и найдите альтернативы, начинающиеся с androidx.compose.material3:.

В вашем примере BottomNavigation и BottomNavigationItem являются частью androidx.compose.material:material. Замените эту зависимость эквивалентом Материала 3 androidx.compose.material3:material3. Компоненты Compose во многом схожи, но большинство из них различаются в определенных аспектах. В вашем случае это означает, что BottomNavigation становится NavigationBar, а BottomNavigationItem становится NavigationBarItem. Также изменились параметры цвета. С новыми компонентами Material 3 это будет выглядеть так:

NavigationBar(
    containerColor = Color(0xff6c247c),
    contentColor = Color.White,
) {
    tabs.forEachIndexed { index, title ->
        NavigationBarItem(
            icon = { Icon(painter = icons[index], contentDescription = title) },
            label = { Text(title) },
            selected = selectedTab == index,
            onClick = { selectedTab = index },
            alwaysShowLabel = true,
            colors = NavigationBarItemDefaults.colors().copy(
                selectedIconColor = Color.White,
                selectedTextColor = Color.White,
                unselectedIconColor = Color.White.copy(alpha = 0.7f),
                unselectedTextColor = Color.White.copy(alpha = 0.7f),
            ),
        )
    }
}

Тем не менее, в Материале 3 вам следует использовать тему, определенную в вашем Theme.kt. Таким образом, вам не придется вручную определять цвета для каждого компонента, вместо этого компоненты получают нужные им цвета из цветовой схемы, определенной в теме. Это также автоматически позаботится об изменении цветов при переключении в темный режим.

На данный момент у вас определены только primary, secondary и tertiary. Другие варианты цвета являются производными от этих цветов. Однако вы также можете указать их явно:

• surfaceContainer для NavigationBarcontainerColor
• onSecondaryContainer для NavigationBarItemselectedIconColor
• onSurface для NavigationBarItemselectedTextColor
• onSurfaceVariant для NavigationBarItemunselectedIconColor и unselectedTextColor

(Символ NavigationBarcontentColor нигде не используется, поэтому я его опустил.)

Ваш LightColorScheme можно определить так:

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    surfaceContainer = Color(0xff6c247c),
    onSecondaryContainer = Color.White,
    onSurface = Color.White,
    onSurfaceVariant = Color.White.copy(alpha = 0.7f),
)

Вы также должны определить соответствующие цвета для DarkColorScheme, которые будут использоваться, когда пользователь переключается в темный режим.

Теперь вы можете удалить все цвета с панели навигации следующим образом:

NavigationBar {
    tabs.forEachIndexed { index, title ->
        NavigationBarItem(
            icon = { Icon(painter = icons[index], contentDescription = title) },
            label = { Text(title) },
            selected = selectedTab == index,
            onClick = { selectedTab = index },
            alwaysShowLabel = true,
        )
    }
}

Теперь имейте в виду, что все цвета, определенные в теме, также влияют на другие составные элементы, а не только на панель навигации. Это сделано специально, поэтому общий вид приложения одинаков для всех компонентов. Возможно, вы захотите изменить значения, чтобы улучшить его. Если вы не хотите определять все значения цвета вручную, вы можете использовать Конструктор тем материалов. Это веб-сайт, который вы можете использовать для автоматического создания и загрузки файла Theme.kt с соответствующими цветами для некоторых заданных вами настроек.

Сказав все это, вы, возможно, захотите заменить весь каркас на NavigationSuiteScaffold. Он основан на NavigationBar и NavigationBarItem, поэтому внутри него используются те же компоненты и та же тема, но он также поддерживает другие виды навигационных компонентов, например NavigationRail (размещается сбоку) или NavigationDrawer (маленькая полоска сбоку). , можно оформить). Какой из них будет использоваться, затем решается во время выполнения в зависимости от доступного размера экрана, как рекомендовано в Навигация в Материале 3.

Имейте в виду, что это все еще экспериментальный вариант, поэтому API может измениться в будущем. На данный момент вы можете заменить весь Scaffold следующим образом:

NavigationSuiteScaffold(
    navigationSuiteItems = {
        tabs.forEachIndexed { index, title ->
            item(
                icon = { Icon(painter = icons[index], contentDescription = title) },
                label = { Text(title) },
                selected = selectedTab == index,
                onClick = { selectedTab = index },
                alwaysShowLabel = true,
            )
        }
    },
) {
    Column {
        when (selectedTab) {
            0 -> HomeView()
            1 -> MediaView()
            2 -> VideosView()
            3 -> ContactView()
        }
    }
}

Вам нужно добавить зависимость Gradle androidx.compose.material3:material3-adaptive-navigation-suite-android.