Jetpack 在深色模式下撰写 TextField 文本颜色

Question

我一直在尝试使用 Jetpack compose，我注意到虽然当您切换到深色模式时Text的文本颜色会正确更新，但TextField或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)

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

这是我的实际 Composable 之一（包含在我的主题中）：

@Composable
fun UsernameField(
    value: String,
    isError: Boolean,
    onValueChange: (String) -> Unit,
) {
    Column {
        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            modifier = Modifier.fillMaxWidth(),
            label = { Text("Username") },
            isError = isError,
            trailingIcon = {
                ClearIcon(
                    visible = value.isNotEmpty(),
                    onClick = { onValueChange("") }
                )
            }
        )
        Text(
            if (isError) "Minimum 6 characters" else "",
            style = MaterialTheme.typography.caption,
            color = MaterialTheme.colors.error,
            modifier = Modifier.padding(top = 4.dp)
        )
    }
}

@Composable
fun ClearIcon(visible: Boolean, onClick: () -> Unit) {
    if (visible) IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Cancel,
            contentDescription = "Clear username",
        )
    }
}

Answer 1

在1.0.0-beta02中， TextField的文本颜色应该可以在暗模式下正常工作。

无论如何， textColor 当前基于：

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

您可以避免使用以下内容更改每个排版 styles：

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

Answer 2

尝试用 Surface 包装它/在使用UsernameField的可组合中应用 Surface 。 简而言之，您没有适当的背景，文本可以采用适当的颜色配置来对比它。

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

@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"上，您基本上可以将您需要的所有 colors 定义为一个 TextField state，如下所示：

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

@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)
)

在这个实现中，我对深色和浅色主题没有任何问题。