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 作为颜色背景，onBackground 用于Text。

Answer 2

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

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

这可能是 compose 中的一个错误。

这发生在这里：

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
    }
}