jetpack compose 中文本顏色的奇怪行為

Question

嘿，我是jetpack compose的新手。 我嘗試根據主題設置窗口背景顏色為黑色和白色。 當我創建自定義主題並設置背景顏色時，我的文本顏色將為黑色。

主題.kt

package com.vivek.sportsresult.ui.theme

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import com.google.accompanist.systemuicontroller.rememberSystemUiController

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color.Black
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color.White
)

@Composable
fun SportsResultTheme(
    darkTheme: Boolean = isDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val systemUiController = rememberSystemUiController()
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> {
            DarkColorScheme
        }
        else -> {
            LightColorScheme
        }
    }

    if (darkTheme) {
        systemUiController.setSystemBarsColor(
            color = Color.Black
        )
    } else {
        systemUiController.setSystemBarsColor(
            color = Color.White
        )
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

@Composable
fun isDarkTheme() = isSystemInDarkTheme()

@Composable
fun getBackgroundColor() = if (isDarkTheme()) {
    DarkColorScheme.background
} else {
    LightColorScheme.background
}

MainActivity.kt

package com.vivek.sportsresult

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.vivek.sportsresult.ui.theme.SportsResultTheme
import com.vivek.sportsresult.ui.theme.getBackgroundColor

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SportsResultTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = getBackgroundColor()
                ) {
                    Log.e("TAG", "onCreate: ")
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SportsResultTheme {
        Greeting("Android")
    }
}

當我嘗試使用color = getBackgroundColor()時，它不會改變文本顏色，但如果使用color = MaterialTheme.colorScheme.background它在深色和白色主題上工作正常。 我不明白為什么？ 有人可以指導我嗎？

實際輸出

預期產出

Answer 1

當您使用MaterialTheme.colorScheme.background時，它可以正常工作，因為在這種情況下， Surface可組合物能夠根據您設置的背景顏色（即color參數）確定正確的內容顏色（即contentColor參數）。

但是，當您在暗模式下使用getBackgroundColor()時，您會返回Color.Black ，並且由於您在裝有 Android 12 的設備上運行代碼，因此您的主題是在此處創建的動態顏色主題

    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

並且顯然不包含任何完全是Color.Black的顏色，即完全是Color(0xFF000000) ，因此Surface可組合無法確定正確的內容顏色。

當在主題中找不到給定的顏色時， contentColor設置為LocalContentColor.current並且碰巧在您的情況下這會導致黑色背景上的黑色文本。

您有 2 個選項：

1. 您可以使用MaterialTheme.colorScheme.background並讓它根據您的主題自動確定contentColor 。
2. 您可以像這樣自己設置color和contentColor顏色

Surface(
    modifier = Modifier.fillMaxSize(),
    color = getBackgroundColor(),
    contentColor = /* get and set some content color */, 
)

此行為是由於Surface contentColor參數默認值是如何通過調用contentColorFor(color)來實現的。 查看 Surface 可組合實現和contentColorFor實現（在 Android Studio 中，您可以 Ctrl/Cmd+單擊它們，或打開上下文菜單 > 轉到 > 實現）。