如何更改 android jetpack 撰写底部AppBar 图标色调颜色？

Question

BottomNavigationBar() 只能采用

background

和

contentColor

，但没有色调选项。

Answer 1

如果您想更改图像的色调颜色，则可以使用

colorFilter

 的 

Image

属性

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

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
)

Answer 3

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

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

但正如其他人所说，您可以在

unselectedContentColor

中使用

selectedContentColor

和

NavigationItem

。

Answer 4

对于

BottomNavigation

，您需要提供

BottomNavigationItem

来构造它，在构造

BottomNavigationItem

时，您可以使用

Icon

和

tint

作为资源，如下所示

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

Answer 5

使用

1.0.0 中的 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 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

更改

Text

和

Icon

的颜色，但 不是

Image()

可组合。因此，如果您想在选择时保留多色图标的颜色，应该使用

Image()

。另外你想在未选择时将其设为灰度，你可以使用 colorFilter。

另外，如果您不想改变

Text/Icon

的颜色，那么您可以使用

Color.Unspecified

。

Answer 8

用于对菜单、产品或类似内容进行评级。我希望你能从中受益。

Row(modifier = Modifier.fillMaxWidth()) {
                repeat(5) { index ->
                    Icon(
                        imageVector = Icons.Default.Star,
                        contentDescription = "Star$index",
                        tint = if (index < rating) Color.Yellow else Color.Gray,
                        modifier = Modifier.size(13.dp)
                    )
                }
            }