Jetpack Compose TextField 在深色模式下的文本颜色

Question

我一直在尝试使用 Jetpack compose，我注意到虽然当您切换到暗模式时 Text 的文本颜色会正确更新，但 TextField 或 {{1} 的文本颜色} 仍然顽固地黑色。不过标签和提示的颜色是正确的。

确定字段的默认文本样式为 OutlinedTextField 后，我已更新我的应用主题以包含此解决方法：

MaterialTheme.typography.body1

但如果这是解决方案，我将不得不为每种排版风格都这样做，而且感觉应该是自动的。那么我做错了什么，或者这是在正式发布之前将被解决的那些问题之一？

这是我的实际可组合之一（包装在我的主题中）：

val typography = if (darkTheme) {
    //TODO: Hack to show text field text in dark mode
    MaterialTheme.typography.copy(body1 = MaterialTheme.typography.body1.copy(color = Color.White))
} else {
    MaterialTheme.typography
}
MaterialTheme(colors = colors, content = content, typography = typography)

Answer 1

使用 1.0.0-beta02 时，TextField 的文本颜色在深色模式下应该可以正常工作。

无论如何，textColor 当前基于：

textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current)

您可以避免使用以下内容更改每种排版样式：

CompositionLocalProvider(LocalContentColor provides MaterialTheme.colors.secondary) {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

Answer 2

尝试用 Surface 包裹它/将 Surface 应用到使用 UsernameField 的可组合中。简单地说，你没有合适的背景，文本可以采用合适的颜色配置来对比它。

有可能的行为和修复的简短示例：

@Preview
@Composable
fun DarkModeTest() {
    MaterialTheme(darkColors()) {
        Column {
            Surface {
                OutlinedTextField(value = "good", onValueChange = {})
            }
            OutlinedTextField(value = "bad", onValueChange = {})
        }
    }
}

通过查看文档：

<块引用>

Surface 负责：

...

内容颜色：Surface 使用 contentColor 指定此表面内容的首选颜色 - Text 和 Icon 组件将其用作默认颜色。

Answer 3

为了自定义 OutlinedTextField 组件上的每种颜色，我一直在使用 "colors" 参数 和 "TextFieldDefaults.outlinedTextFieldColors()" 方法.

下面是一个例子：

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    colors = TextFieldDefaults.outlinedTextFieldColors(
        unfocusedLabelColor = MaterialTheme.colors.primary
    )
)

在“outlinedTextFieldColors”上，基本上可以定义TextField状态所需的所有颜色，如下图：

<块引用>

创建一个代表默认输入文本的 TextFieldColors， 背景和内容（包括标签、占位符、前导和 尾随图标）在 OutlinedTextField 中使用的颜色。

@Composable
fun outlinedTextFieldColors(
    textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
    disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
    backgroundColor: Color = Color.Transparent,
    cursorColor: Color = MaterialTheme.colors.primary,
    errorCursorColor: Color = MaterialTheme.colors.error,
    focusedBorderColor: Color =
        MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedBorderColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
    disabledBorderColor: Color = unfocusedBorderColor.copy(alpha = ContentAlpha.disabled),
    errorBorderColor: Color = MaterialTheme.colors.error,
    leadingIconColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
    disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
    errorLeadingIconColor: Color = leadingIconColor,
    trailingIconColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
    disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
    errorTrailingIconColor: Color = MaterialTheme.colors.error,
    focusedLabelColor: Color =
        MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
    disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
    errorLabelColor: Color = MaterialTheme.colors.error,
    placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
    disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled)
)

我在使用此实现时没有遇到任何深色和浅色主题的问题。