如何更改Android Jetpack Compose中BottomAppBar图标的色调颜色？

Question

BottomNavigationBar() 只能使用 background 和 contentColor，但是没有色调选项。

- Smmy Sa

Answer 1

如果您想更改图像的色调颜色，则可以使用Image的colorFilter属性。

Image(
    painter = painterResource(R.drawable.ic_arrow_details), 
    contentDescription = "", 
    colorFilter = ColorFilter.tint(Color.Black)
)

- Mohit Suthar

Answer 2

如果您想完全删除色彩，并且希望使用图标的颜色，则可以尝试使用：tint = Color.Unspecified 例如：

Icon(
    modifier = Modifier.size(34.dp),
    imageVector = ImageVector.vectorResource(id = R.drawable.ic_your_icon),
    contentDescription = "Some icon",
    tint = Color.Unspecified
)

- F.Mysir

Answer 3

如果您不想更改内容颜色，并希望为特定图标设置单独的颜色，则可以使用tint属性。例如：

Icon(
 Icons.Filled.PushPin, "",
 tint = MaterialTheme.colors.secondary
)

但是正如其他人所说，您可以在NavigationItem中使用unselectedContentColor和selectedContentColor。

- Ehsan Shadi

Answer 4

对于 BottomNavigation，您需要提供 BottomNavigationItem 来构建它，而在构建 BottomNavigationItem 时，您可以像下面这样使用带有资源的 tint 的 Icon。

BottomNavigation() {
    BottomNavigationItem(icon = { 
           Icon(asset = vectorResource(id = R.drawable.homeBottomNav), tint = Color.Blue) //this is tint
       }, selected = true, onClick = {})
}

- Rajan Kali

Answer 5

使用 BottomNavigationItem 的 1.0.0 版本（已测试 1.0.0-beta06），您可以定义以下属性：

• selectedContentColor - 选中内容颜色
• unselectedContentColor - 未选中内容颜色

示例：

    BottomNavigation(backgroundColor = Color.White) {
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
    }

由于默认的selectedContentColor基于LocalContentColor.current，因此您也可以使用类似以下的内容：

    BottomNavigation(backgroundColor = Color.White) {
        CompositionLocalProvider(LocalContentColor provides Color.Red) {
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
        }
    }

- Gabriele Mariotti

---

你应该动态地更改 selected！ - Hossein Badrnezhad

Answer 6

您可以使用unselectedContentColor和selectedContentColor。

BottomNavigationItem(
   unselectedContentColor = Color.Black,
   selectedContentColor = Color.Red,
   icon = {
       Icon(
           painter = painterResource(id = screen.iconResourceId),
           contentDescription = null)
           },
    selected = currentRoute == screen.route,
    onClick = { }
)

- MaxUt

Answer 7

selectedContentColor 可以改变 Text 和 Icon 的颜色，但不适用于 Image() Composable。所以如果你想在选中时保持多彩图标的颜色，就应该使用 Image()。另外，如果你想让它在未选中时呈现灰度效果，可以使用 colorFilter。

此外，如果你不想改变 Text/Icon 的颜色，那么你可以使用 Color.Unspecified。

- Jemshit Iskenderov