如何在 Jetpack Compose 中引用主题属性？

Question

所以在目前的andriod开发中，如果我们需要引用主题中的颜色集，我们可以简单地做：(in layout xml)

....
    <TextView
        ...
        android:textColor="?attr/colorPrimary"
        .../>
....

如果我在主题中设置了蓝色。我将在上面的文本视图中获取该颜色。

我想知道如何在 Jetpack Compose 中做同样的事情。在Compose，我们做到了，

MaterialTheme(...) {
    Column {
        Text(
            ...
            textStyle = TextStyle(color = ????) // How to I reference to the theme?
        )
    }
}

Answer 1

您可以使用类似的东西：

Text(text = "....",
     style = TextStyle(color = MaterialTheme.colors.primary))

Answer 2

Compose 提供 ColorPalette 基于 Material 颜色规范来生成您的应用主题。它提供 lightColorPalette 和 darkColorPalette 分别定义浅色和深色模式的主题。

val lightThemeColors = lightColorPalette(
    primary = Color(0xFFFFFFFF),
    primaryVariant = Color(0xFFFFFFFF),
    onPrimary = Color.Black,
    secondary = Color.Transparent,
    onSecondary = Color.White,
    background = Color.White,
    onBackground = Color(0xFF212121),
    surface = Color.White,
    onSurface = Color(0xFF212121),
    error = Color.Red,
    onError = Color.White
)
val darkThemeColors = darkColorPalette(
    primary = Color(0xFF000000),
    primaryVariant = Color(0xFF000000),
    onPrimary = Color.White,
    secondary = Color.White,
    onSecondary = Color.White,
    surface = Color(0xFF212121),
    background = Color(0xFF212121),
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
    onError = Color.White
)
MaterialTheme(
colors = if(isSystemInDarkTheme()) darkThemeColors else lightThemeColors
) {
    Column {
        Text(
        textStyle = TextStyle(color = MaterialTheme.colors.primary)
        )
    }
}

如果您想为您的主题添加更多自定义颜色，您可以使用 ColorPalette 和扩展变量，如下所示

@Composable
val ColorPalette.myColor: Color
    get() = if(!isLight) Color(0xFF424242) else Color.White

现在您可以使用 MaterialTheme.colors.myColor 来包含。

如果您想包含 android 种颜色 xml 中的颜色，您可以使用 colorResource(id = R.color.anyName) 函数来实现。

Answer 3

你可以试试这个：

inline fun <T> Resources.Theme.getAttribute(
    @AttrRes attr: Int,
    block: (TypedArray) -> T,
): T {
    val a = obtainStyledAttributes(intArrayOf(attr))
    return block(a).also { a.recycle() }
}

fun Resources.Theme.getDrawableAttribute(@AttrRes attr: Int): Drawable =
    getAttribute(attr) { it.getDrawable(0)!! }

fun Resources.Theme.getDimensionAttribute(@AttrRes attr: Int, defaultValue: Float = 0f): Float =
    getAttribute(attr) { it.getDimension(0, defaultValue) }

fun Resources.Theme.getStringAttribute(@AttrRes attr: Int): String? =
    getAttribute(attr) { it.getString(0) }

fun Resources.Theme.getColorAttribute(@AttrRes attr: Int, defaultValue: Int = 0): Int =
    getAttribute(attr) { it.getColor(0, defaultValue) }


@Composable
fun getDimensionAttribute(@AttrRes attr: Int, defaultValue: Float = 0f): Float =
    LocalContext.current.theme.getDimensionAttribute(attr, defaultValue)

@Composable
fun getStringAttribute(@AttrRes attr: Int): String? =
    LocalContext.current.theme.getStringAttribute(attr)

@Composable
fun getColorAttribute(@AttrRes attr: Int, defaultValue: Int = 0): Int =
    LocalContext.current.theme.getColorAttribute(attr, defaultValue)

如何在 Jetpack Compose 中引用主题属性？

How to reference theme attributes in Jetpack Compose?

android

android-theme

android-jetpack-compose