Why does alpha not work when two parameters are written together?

# compose

[Nthily]

Why does alpha not work when two parameters are written together?

[Nthily]

The second one uses nested wording, it can take effect

[Nthily]

I know that Icon can use the tint parameter to specify the color of the Icon, but I experimented with this method and found that there is a bug in alpha

[Louis Pullen-Freilich [G]]

Could you file a bug with a simple reproduction?

[Nthily]

ListItem(text = {Text("github")}, icon = {
    Surface(
        shape = CircleShape,
        color = Color(0xFF181717)
    ) {
        Box(modifier = Modifier.padding(5.dp)){
            CompositionLocalProvider(
                LocalContentAlpha provides ContentAlpha.high,
                LocalContentColor provides Color.White){
                Icon(painterResource(R.drawable.github),null)
            }
        }
    }
},modifier = Modifier.clickable {  })
ListItem(text = {Text("微信")}, icon = {
    Surface(
        shape = CircleShape,
        color = Color(0xFF07C160)
    ) {
        Box(modifier = Modifier.padding(5.dp)){
            CompositionLocalProvider(LocalContentColor provides Color.White) {
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.high,
                ){
                    Icon(painterResource(R.drawable.wechat),null)
                }
            }
        }
    }
},modifier = Modifier.clickable {  })

[Louis Pullen-Freilich [G]]

Ah I see, yes, this is tricky. ContentAlpha.high uses LocalContentColor to calculate whether the content is high / low contrast, to calculate the correct alpha. This normally isn’t a problem, as the component that draws the background (in this case Surface) provides the color, so the alpha can correctly be calculated later.

If you explicitly set contentColor = Color.White in Surface, this is probably the easiest way, but I agree it is a bit confusing

[Nthily]

Thank you for your answer!