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

Question

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

我发现以下代码可以实现：

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

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

However, 我想在主题层面上覆盖它，这样我就不需要反复编写 ProvideTextStyle。我发现MaterialTheme只接受以下参数：

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

我不确定如何做。有人可以帮忙吗？

(compose版本=1.0.0-alpha11)

- I'm a frog dragon

---

你可以像这样定义颜色（colors是TextField的参数）：colors = TextFieldDefaults.textFieldColors(textColor=YourColor) - Adrian Grygutis

Answer 1

正如Adrian Grygutis在评论中指出的那样，在1.0.0版本中，TextField有一个名为 colors 的参数。您可以通过使用所需更改的参数调用 TextFieldDefaults.textFieldColors(...) 来自定义您的TextField。

TextField(
    ...
    colors: TextFieldColors = TextFieldDefaults.textFieldColors(textColor = Color.White),
) {

关于主题，如果你想避免每次调用：

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

你可以使用自己的TextFieldColors设置来创建可组合对象，并将其添加为您TextField的参数。例如，你可以将所有颜色都设置为白色：

@Composable
fun MyAppTextFieldColors(
    textColor: Color = Color.White,
    disabledTextColor: Color = Color.White,
    backgroundColor: Color = Color.White,
    cursorColor: Color = Color.White,
    errorCursorColor: Color = Color.White,
    ...
) = TextFieldDefaults.textFieldColors(
    textColor = textColor,
    disabledTextColor = disabledTextColor,
    backgroundColor = backgroundColor,
    cursorColor = cursorColor,
    errorCursorColor = errorCursorColor,
    ...
)

为了避免在每个TextField中调用它，您可以创建一个自定义的MyAppTextField来调用默认的TextField，并将您的自定义TextFieldColors作为默认参数传递进去：

@Composable
fun MyAppTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    ...
    colors: TextFieldColors = MyAppTextFieldColors(),
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        ...
        colors = colors,
    )
}

这样，您只需要调用 MyAppTextField。如果需要覆盖从主题继承的颜色，这是一个不错的方法。

- Arthur Bertemes

Answer 2

M2的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") }
    )
}

- Gabriele Mariotti

---

我尝试将其应用于BasicTextField，但它不起作用，有什么提示吗？为了使其工作，我必须像这样更改样式：textStyle = TextStyle.Default.copy(fontSize = fontSize.sp, color = fontColor)。 - GuilhE

Answer 3

我希望在主题级别上覆盖这个内容。

修改应用程序主题合成中的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
    }
}

- Om Kumar

---

这应该是正确的答案。我们正在将颜色方案设置为整个 MyAppTheme。 - Javi

Answer 4

你可以创建自己的 TextField Widget，并使用所需的 color 在所有地方使用。

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

现在开始使用ColoredTextField代替TextField，通过更改在你的Widget中的color，它会应用于所有位置。

- Rajan Kali

---

谢谢！这可能是一个不错的解决方案，但我希望有一种在主题级别上实现它的方法。 - I'm a frog dragon

Answer 5

在版本 1.0.0-beta07 中，您可以使用 textStyle 属性覆盖样式，因此更改内容颜色。另请参见文本框样式。

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

- yannickpulver

---

这只会改变输入文本框中值的颜色，你如何同时改变标签的颜色？ - alfietap

TextField( value = name, onValueChange = {}, textStyle = TextStyle(color = Color.White), label = { Text(text = label, modifier = Modifier, color = Color.White, style = TextStyle(fontStyle = FontStyle.Italic)) }, readOnly = true ) - Oke Uwechue

（即您可以直接在“标签”参数中包含的Text元素中设置“color”参数） - Oke Uwechue

Answer 6

使用自己的Color对象配置来配置应用程序的MaterialTheme，设置内容颜色参数（onPrimary、onSecondary等）。

MaterialTheme(
    colors = Colors(
        primary = Color.Black,
        secondary = Color.Black,
        background = Color.Black,
        onPrimary = Color.Red,
        onSecondary = Color.Red,
        onBackground = Color.Red
    )
)

注意：为了使字体颜色生效，您必须设置主要颜色（primary、secondary等）。这是由于在androidx.compose.material.Colors::contentColorFor中定义的逻辑所致。

- Henrique Prandi