如何在Jetpack Compose中修改TextField的边框颜色？

方案一：直接在现有TextField上添加动态边框（推荐） #

无需改用BasicTextField，通过InteractionSource监听聚焦状态，结合Modifier.border就能实现类似OutlinedTextField的边框效果：

val interactionSource = remember { MutableInteractionSource() }
val isFocused = interactionSource.collectIsFocusedAsState()

TextField(
    value = currentWeight,
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp)
        .border(
            width = 1.dp,
            color = if (isFocused.value) Red else Color.Gray, // 自定义聚焦/非聚焦边框颜色
            shape = RoundedCornerShape(5.dp)
        ),
    onValueChange = { currentWeight = it },
    label = { Text(text = "Mevcut kilon (kg)") },
    shape = RoundedCornerShape(5.dp),
    interactionSource = interactionSource, // 绑定交互源以监听聚焦状态
    colors = TextFieldDefaults.textFieldColors(
        textColor = Grey2,
        disabledTextColor = Color.Transparent,
        backgroundColor = Grey3,
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        disabledIndicatorColor = Color.Transparent,
    )
)

说明 #

• 原代码中已将indicatorColor设为透明，不会与自定义边框产生冲突
• 通过collectIsFocusedAsState()获取实时聚焦状态，动态切换边框颜色

方案二：修复BasicTextField的错误 #

如果坚持使用BasicTextField，需解决以下两个问题：

错误1：Unresolved reference: TextFieldDecorationBox #

• 确保Compose Material版本≥1.2.0（在build.gradle中检查依赖版本）
• 导入正确的包：import androidx.compose.material.TextFieldDefaults.TextFieldDecorationBox

错误2：@Composable invocations can only happen from the context of a @Composable function #

• 确保所有@Composable组件（如Text）的调用都在@Composable函数内部

修复后的完整代码：

@Composable
fun CustomBorderTextField() {
    var currentWeight by remember { mutableStateOf("") }
    val interactionSource = remember { MutableInteractionSource() }
    val isFocused = interactionSource.collectIsFocusedAsState()
    val shape = RoundedCornerShape(2.dp)
    val borderColor = if (isFocused.value) Red else Color.Gray
    val singleLine = true
    val enabled = true

    BasicTextField(
        value = currentWeight,
        onValueChange = { currentWeight = it },
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine,
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
            .border(1.dp, borderColor, shape)
            .background(
                color = TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
                shape = shape
            )
    ) { innerTextField ->
        TextFieldDefaults.TextFieldDecorationBox(
            value = currentWeight,
            innerTextField = innerTextField,
            singleLine = singleLine,
            enabled = enabled,
            label = { Text("Mevcut kilon (kg)") },
            placeholder = { Text("输入体重") },
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = TextFieldDefaults.textFieldColors(
                textColor = Grey2,
                backgroundColor = Grey3
            )
        )
    }
}

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