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

Question

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

我发现这很有效：

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

不过，我想在Theme层级覆盖这个，这样我就不需要重复写ProvideTextStyle。我看到 MaterialTheme 只接受以下参数：

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

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

(compose version = 1.0.0-alpha11)

Answer 1

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

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

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

Answer 2

对于 1.0.x，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") }
    )
}

Answer 3

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

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

Answer 4

I want to override this in the Theme level

在您的应用的主题可组合项中修改 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
    }
}

Answer 5

正如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。如果需要，这是覆盖从主题继承的颜色的好方法。

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

How to override the text color in TextField in Jetpack Compose using MaterialTheme?

android

android-layout

android-jetpack-compose

android-jetpack-compose-text

android-compose-textfield