Jetpack Compose中TextField无法修改颜色问题求助

你遇到的问题核心是：Jetpack Compose的TextField组件并没有直接名为color的参数，这个错误的参数会导致Compose无法正确解析配置，进而让TextField进入错误状态（显示红色）。

正确的颜色设置方式 #

如果你想修改TextField的输入文本颜色，或者定制组件整体颜色风格，需要用以下两种合规方式：

方案1：仅设置输入文本颜色

通过textStyle参数指定输入文本的颜色：

@Composable
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        textStyle = TextStyle(color = Color.Black), // 配置输入文本颜色
        leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
        placeholder = { Text(text = "Search Here") },
        modifier = Modifier
            .heightIn(min = 56.dp)
            .fillMaxWidth(),
    )
}

方案2：全面定制TextField颜色状态

如果需要修改占位符、光标、边框等更多颜色细节，使用colors参数配合TextFieldDefaults.textFieldColors()：

@Composable
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        textStyle = TextStyle(color = Color.Black),
        leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
        placeholder = { Text(text = "Search Here", color = Color.Gray) },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Black,
            unfocusedIndicatorColor = Color.Gray,
            cursorColor = Color.Black
        ),
        modifier = Modifier
            .heightIn(min = 56.dp)
            .fillMaxWidth(),
    )
}

补充说明 #

你复制的官方教程代码可能基于旧版Compose API，或者你混淆了Text组件的color参数（Text组件确实有直接的color参数，但TextField没有）。当前稳定版Compose需要通过上述方式配置TextField颜色，避免使用不存在的参数引发UI异常。

内容的提问来源于stack exchange，提问作者Haziq Haris