Jetpack Compose“onSurface”颜色不起作用

Posted 2023-05-06

【中文标题】Jetpack Compose“onSurface”颜色不起作用

【英文标题】：Jetpack Compose "onSurface" Color not working

【发布时间】：2021-08-14 04:31:47

【问题描述】：

我正在使用 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))
        

【参考方案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。

【参考方案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
    

【讨论】：

谢谢，弗朗西斯科！你说得对;我们必须为surface 设置不同的颜色。我接受了 Grabriele 的回答，因为他先回答。但真的很感谢帮助??