为何将surface颜色设为白色时BottomAppBar背景非白色？

你的代码示例：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(colorScheme = MaterialTheme.colorScheme.copy(surface = Color.Black)){
                BottomAppBar(containerColor = Color.White) {

                }
            }
        }
    }
}

你遇到的问题：显式指定BottomAppBar的containerColor = Color.White后，当MaterialTheme的surface设为黑色或其他非白色时，底部栏保持白色；但一旦把surface设为白色，底部栏颜色就会改变。

原因分析 #

这是Material Design 3（MD3）组件的内置设计逻辑：

• BottomAppBar作为导航类组件，需要和页面背景保持视觉区分度。
• 当你显式设置的containerColor与主题中的surface颜色完全一致时，MD3会自动将容器颜色切换为colorScheme.surfaceVariant，以此避免底部栏和页面表层背景融为一体，符合MD3的可用性规范。

解决办法 #

如果需要强制BottomAppBar保持白色，不受主题surface颜色的影响，可以通过以下方式实现：

显式设置surfaceTintColor = Color.Transparent，阻断组件的自动颜色切换逻辑：

BottomAppBar(
    containerColor = Color.White,
    surfaceTintColor = Color.Transparent
) {
    // 底部栏内容
}

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