如何在 Jetpack Compose 中引用主题属性?
How to reference theme attributes in Jetpack Compose?
所以在目前的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?
)
}
}
您可以使用类似的东西:
Text(text = "....",
style = TextStyle(color = MaterialTheme.colors.primary))
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)
函数来实现。
你可以试试这个:
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)
所以在目前的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?
)
}
}
您可以使用类似的东西:
Text(text = "....",
style = TextStyle(color = MaterialTheme.colors.primary))
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)
函数来实现。
你可以试试这个:
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)