Jetpack Compose“onSurface”颜色不起作用

Question

我正在使用 Jetpack Compose 测试 Material Theming，但我不确定为什么我不能使主题的 onSurface 颜色起作用。

这是将 Theme.kt 颜色设置为 onSurface 的 Color.Red：

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    onSurface = Color.Red, // <------- HERE
    onPrimary = Color.Blue, // <----- HERE
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    onSurface = Color.Red, // <------- AND HERE
    onPrimary = Color.Blue, // <----- HERE
)

@Composable
fun ExploringMaterialTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

这是活动：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Preview
@Composable
fun MyApp() {
    ExploringMaterialTheme {
        // I also tried
        // Surface(color = MaterialTheme.colors.surface) {
        Surface {
            Text(text = "Hello!!", modifier = Modifier.padding(16.dp))
        }
    }
}

我期待“你好！！”显示为红色，而是显示为正常的黑色。任何想法我错过了什么？ ?

当我在 Surface 组件中设置颜色时，它可以正常工作。 Surface 获得正确的 on 颜色（在本例中为 onPrimary）：

        Surface(color = MaterialTheme.colors.primary) {
            Text(text = "Hello!!", modifier = Modifier.padding(16.dp))
        }

Answer 1

Surface 可组合用途：

CompositionLocalProvider(
        LocalContentColor provides contentColor){
            //
            content()
}

其中 contentColor 定义为：

fun Colors.contentColorFor(backgroundColor: Color): Color {
    return when (backgroundColor) {
    primary -> onPrimary
    primaryVariant -> onPrimary
    secondary -> onSecondary
    secondaryVariant -> onSecondary
    background -> onBackground
    surface -> onSurface
    error -> onError
    else -> Color.Unspecified
    }
}

目前您必须在主题中指定 surface 颜色：

private val LightColorPalette = lightColors(
    primary = Blue500,
    surface = Color.Yellow)

在这种情况下，Text 使用 onSurface 颜色。

如果您不指定 surface 颜色，则 Surface 组件使用 background 作为 colorBackground，使用 onBackground 作为 Text。

Answer 2

颜色与背景颜色而不是表面颜色相匹配似乎存在一些问题，因此它返回 onBackground。如果您将 surface 颜色设置为与 background 颜色不同，那么它会选择正确的 onSurface 颜色，例如

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    onSurface = Color.Red,
    surface = Color.Green,
)

这可能是撰写中的一个错误。

这发生在这里：

fun Colors.contentColorFor(backgroundColor: Color): Color {
    return when (backgroundColor) {
    primary -> onPrimary
    primaryVariant -> onPrimary
    secondary -> onSecondary
    secondaryVariant -> onSecondary
    background -> onBackground
    surface -> onSurface
    error -> onError
    else -> Color.Unspecified
    }
}