android - 如何更改 android jetpack compose bottomAppBar 图标的颜色？

Question

BottomNavigationBar() 只能取backgroundandcontentColor但没有 tint color 选项。

Answer 1

如果你想改变图像的色调，那么你可以使用下面的代码

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

您可以在 Image 中使用colorFilter属性

Answer 2

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

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

unselectedContentColor但正如其他人所说，你可以selectedContentColor在你的NavigationItem.

Answer 3

对于BottomNavigation，您需要提供BottomNavigationItem构造它，在构造时BottomNavigationItem，您可以使用Iconwithtint作为资源，如下所示

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

Answer 4

使用中的1.0.0(tested with 1.0.0-beta06)，BottomNavigationItem您可以定义属性：

• 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 = {})
        }
    }

Answer 5

如果您想完全删除色调颜色并且想使用图标的颜色，请尝试：tint = Color.Unspecified

例如：

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

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 = { }
)

Answer 7

selectedContentColor改变 and 的颜色Text，Icon但不是Composable Image()。因此，如果您想在选中时保持多色图标的颜色，则应使用Image(). 此外，如果您想在未选中时使其变为灰度，则可以使用 colorFilter。

另外，如果您不想更改 的颜色Text/Icon，则可以使用Color.Unspecified.