如何在 Jetpack Compose 中直接使用颜色资源？

Question

我想直接使用colors.xml类中定义的自定义颜色，而不使用Material主题颜色或Jetpack提供的默认主题。有什么直接的方法可以做到吗？

Answer 1

您可以使用

colorResource()

来加载颜色资源。

Text(
    text = "Hello World",
    color = colorResource(R.color.purple_200)
)

Answer 2

要在 jetpack compose 中使用颜色，请使用推荐的方法在 com.. 中创建一个包 ui.theme，如果您正在创建空的 compose 项目，则默认情况下可能会出现该包。现在创建 Color.kt 和 Theme.kt kotlin 文件（如果您的项目中不存在）。

在Color.kt中添加您需要的颜色

package com.<domain_name>.<app_name>.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val Flower = Color(0xFF4CAF50)
val Deer = Color(0xFFFF5722)
val Mango = Color(0xFFFF9800)
val AppbarColor = Color(0xFF2196F3)

这里可以使用我制作的Material Color模板了

有3种常见的颜色使用方法

方法1：直接使用颜色

import com.<domain_name>.<app_name>.ui.theme.*

Text(text = "Hello ", color = Flower)

方法2：覆盖默认的MaterialTheme颜色

现在，Theme.kt

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Flower //Custom color
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Deer //Custom color

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

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

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

MainActivity.kt

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

@Composable
fun ColorApp() {
    ColorTheme {
        Surface(modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background) {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", color = MaterialTheme.colors.onBackground) //Using color
}

@Preview(
    showBackground = true, name = "Light mode",
    uiMode = Configuration.UI_MODE_NIGHT_NO or 
    Configuration.UI_MODE_TYPE_NORMAL
    )
@Preview(
    showBackground = true, name = "Night mode",
    uiMode = Configuration.UI_MODE_NIGHT_YES or 
    Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun DefaultPreview() {
    ColorApp()
}

方法3：自定义主题（推荐方法）

Text(text = "Hello ", color = AppNameTheme.colors.customColor)

Answer 3

在 ui/theme/Color.kt 中定义颜色

val LightGray = Color(0xFFE7E2E2)
val LighterGray = Color(0xFFDED8D8)
val MediumGray = Color(0xFFD3CACA)
val DarkerGray = Color(0xFF9D9999)
val VeryDarkGray = Color(0xFF646161)
val BlackGray = Color(0xFF020202)

而不是打电话给他们：

import com.example.<appName>.ui.theme.*

而不是简单地通过写下他们的名字来使用它们：

val buttonColor = when (i) {
        0 -> LightGray
        1 -> LighterGray
        2 -> MediumGray
        3 -> DarkerGray
        4 -> VeryDarkGray
        else -> BlackGray
}