如何自定义TopAppBar中IconButton的颜色？Compose技术问询

这个问题我在开发Compose项目时也碰到过，咱们先搞清楚图标为啥会用主题颜色，再一步步解决自定义的问题～

为什么图标默认用主题颜色？ #

TopAppBar 内部会从主题的 TopAppBarColors 中获取 contentColor，而 Icon 组件默认会把 LocalContentColor.current 作为图标的 tint（着色）值。在 TopAppBar 的作用域里，LocalContentColor 被自动设置成了 TopAppBar 的 contentColor，所以图标就继承了主题预设的颜色。

三种自定义颜色的实用方法 #

方法1：直接给Icon设置tint参数 #

这是最直接的方式，给单个图标指定想要的颜色：

Scaffold(
    topBar = { 
        TopAppBar(
            title = { Text(text = "LayoutsCodelab") },
            actions = { 
                IconButton(onClick = { /* doSomething() */ }) { 
                    Icon(Icons.Filled.Favorite, tint = Color.Red) // 直接指定自定义颜色
                }
            }
        )
    }
)

方法2：修改TopAppBar的整体contentColor #

如果想让TopAppBar里的所有内容（标题、所有图标）都用同一个自定义颜色，可以通过TopAppBarDefaults.topAppBarColors统一设置：

Scaffold(
    topBar = { 
        TopAppBar(
            title = { Text(text = "LayoutsCodelab") },
            actions = { 
                IconButton(onClick = { /* doSomething() */ }) { 
                    Icon(Icons.Filled.Favorite) // 现在会使用我们设置的Green颜色
                }
            },
            colors = TopAppBarDefaults.topAppBarColors(
                contentColor = Color.Green // 统一设置TopAppBar内容的颜色
            )
        )
    }
)

方法3：局部覆盖LocalContentColor #

如果只想改某个IconButton的颜色，不想影响TopAppBar里的其他元素，可以用CompositionLocalProvider局部覆盖内容颜色：

Scaffold(
    topBar = { 
        TopAppBar(
            title = { Text(text = "LayoutsCodelab") },
            actions = { 
                IconButton(onClick = { /* doSomething() */ }) { 
                    CompositionLocalProvider(LocalContentColor provides Color.Blue) {
                        Icon(Icons.Filled.Favorite) // 这个图标会用Blue颜色，其他元素不受影响
                    }
                }
            }
        )
    }
)

内容的提问来源于stack exchange，提问作者ccd