如何使用 MaterialTheme 在 Jetpack Compose 中覆盖 TextField 中的文本颜色？

问题描述

我正在尝试使用 Jetpack Compose 中的 TextField()。我希望文本颜色为白色。

我发现这是有效的：

ProvideTextStyle(TextStyle(color = Color.White)) {
   TextField(
       ...
   )
}

但是，我想在主题级别覆盖它，这样我就不需要重复写ProvideTextStyle。我看到 MaterialTheme 只接受以下参数：

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,typography: Typography = MaterialTheme.typography,shapes: Shapes = MaterialTheme.shapes,content: @Composable () -> Unit
)

所以我不知道该怎么做。有人可以帮忙吗？

（撰写版本 = 1.0.0-alpha11）

解决方法

您可以使用所需的 TextField 创建自己的 color 小部件并在所有地方使用它，

@Composable
fun ColoredTextField(value: String,onValueChange: (String) -> Unit){
    ProvideTextStyle(TextStyle(color = Color.White)) {
        TextField(value = value,onValueChange = onValueChange)
    }
}

现在开始使用 ColoredTextField 而不是 TextField，通过更改 color 中的 Widget，它会应用于所有地点。

,

对于 1.0.0-beta06，TextField contentColor 基于 LocalContentColor.current。您可以使用 CompositionLocalProvider 提供自定义 LocalContentColor。

您可以定义一个自定义函数，例如：

@Composable
fun ContentColorComponent(
    contentColor: Color = LocalContentColor.current,content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalContentColor provides contentColor,content = content)
}

它可以与许多组件一起使用，例如 TextField:

ContentColorComponent(contentColor = Color.Blue) {
    TextField(
        value = text,onValueChange = { text = it },label = { Text("Label") }
    )
}

,

原始 style.xml 可以通过以下方式定义：

<item name="android:textColorPrimary">@color/textColorPrimary</item>

设置

现在你可以在 theme.kt 中定义一个：

val colorSecondary = Color(......)

例如：

private val DarkColorPalette = darkColors(
    primary = colorPrimary,primaryVariant = colorPrimary,secondary = colorSecondary)

?希望能帮到你！

,

在 1.0.0-beta07 中，您可以使用 textStyle 属性来覆盖样式，从而覆盖内容颜色。另请参阅Styling TextField。

TextField(
   ...
   textStyle = TextStyle(color = Color.Blue) 
)

,

我想在主题级别覆盖它

在您的应用的可组合主题中修改 MaterialTheme 可组合的内容以包含 TextStyle。

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

    MaterialTheme(
        colors = colors,typography = Typography,shapes = Shapes,content = {
            ProvideTextStyle(
                value = TextStyle(color = Color.White),content = content
            )
        }
    )
}

现在您提供的 TextStyle 将用于应用主题级别。

setContent {
    MyAppTheme {
        // app content
    }
}