Jetpack Compose中TextField焦点状态下设置渐变边框的方法

默认的TextFieldDefaults.outlinedTextFieldColors只能给focusedBorderColor设置纯色，要实现你想要的渐变边框效果，得自定义OutlinedTextField的border参数，而非依赖默认的颜色配置。

具体实现步骤如下：

1. 保存焦点状态并定义渐变画笔
   用remember获取实时焦点状态，同时创建需要的渐变Brush。
2. 根据焦点切换边框样式
   在border参数中判断当前是否聚焦：未聚焦时用纯色边框，聚焦时用渐变边框。

完整代码示例：

@Composable
fun GradientBorderTextField() {
    val textState = remember { mutableStateOf(TextFieldValue("")) }
    val interactionSource = remember { MutableInteractionSource() }
    val isFocused = interactionSource.collectIsFocusedAsState().value

    // 自定义渐变颜色，可根据需求调整
    val gradientBrush = Brush.linearGradient(
        colors = listOf(
            Color(0xFF6200EE),
            Color(0xFF03DAC6)
        )
    )

    OutlinedTextField(
        value = textState.value,
        onValueChange = { textState.value = it },
        label = { Text("输入内容") },
        trailingIcon = { Icon(Icons.Default.Clear, contentDescription = "清除") },
        interactionSource = interactionSource,
        // 动态切换边框样式
        border = if (isFocused) {
            BorderStroke(
                width = 2.dp,
                brush = gradientBrush
            )
        } else {
            BorderStroke(
                width = 1.dp,
                color = md_theme_light_inversePrimary
            )
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            unfocusedBorderColor = Color.Transparent, // 设为透明避免和自定义边框冲突
            focusedLabelColor = Color.White,
            trailingIconColor = Color.White
        )
    )
}

注意：

• 通过interactionSource.collectIsFocusedAsState()可以实时获取焦点状态
• 未聚焦时的边框宽度、颜色可根据需求自行调整
• 必须将默认的unfocusedBorderColor设为透明，否则会和自定义边框重叠显示

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