android - 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

尝试用 Surface 包裹它/将 Surface 应用到使用 UsernameField 的可组合中.简而言之，您没有适当的背景，文本可以采用适当的颜色配置来对比它。
有可能的行为和修复的简短示例:

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

通过查看文档:

The Surface is responsible for:

...

Content color: Surface uses contentColor to specify a preferred color for the content of this surface - this is used by the Text and Icon components as a default color.