jetpack compose material3中TopAppBar的默认颜色

Question

我发现我的项目中 TopAppBar 的默认颜色是白色（在浅色模式下），而通常它应该有另一种默认颜色，比如在document中。

我注意到代码中的默认颜色是：

@Composable
fun TopAppBar(
    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
    ...
)

@Composable
fun smallTopAppBarColors(
    containerColor: Color = TopAppBarSmallTokens.ContainerColor.toColor(),
    ...
）

internal object TopAppBarSmallTokens {
    val ContainerColor = ColorSchemeKeyTokens.Surface
    ...
}

与ColorSchemeKeyTokens.Surface的 ColorSchemeKeyTokens.Surface 相同：

@Composable
fun BottomAppBar(
    containerColor: Color = BottomAppBarDefaults.containerColor,
    ...
)

object BottomAppBarDefaults {
    val containerColor: Color @Composable get() = BottomAppBarTokens.ContainerColor.toColor()
    ...
}

internal object BottomAppBarTokens {
    val ContainerColor = ColorSchemeKeyTokens.Surface
    ...
}

但在我的测试中， TopAppBar的容器颜色与文档显示的相同，而TopAppBar的容器颜色是另一种：白色。

我不知道是什么原因导致 TopAppBar 的默认颜色变成白色。

图书馆的版本：

• 撰写：1.3.0-rc01
• 材料 3：1.0.0-rc01

Answer 1

M3 TopAppBar中的默认背景颜色基于colors属性中定义的containerColor属性。

默认颜色是val ContainerColor = ColorSchemeKeyTokens.Surface 。

检查你的主题。 如果省略surface颜色，则光方案默认值为： #FFFBFE ，如文档中所述。

您可以签入代码：

val Surface = PaletteTokens.Neutral99
val Neutral99 = Color(red = 255, green = 251, blue = 254)