¿Cómo eliminar la línea indicadora de TextField en Androidx Compose Material?

Solución:

Con 1.0.0-alpha04 la línea indicadora se dibuja con un Modifier.drawBehind y no hay parámetros para personalizarlo.

Una solución alternativa (¡pero no me gusta!) Podría ser dibujar otra línea con el color de fondo del diseño principal.

Algo como:

var text by remember { mutableStateOf(TextFieldValue("Text")) }
val focusRequester = FocusRequester()
var isFocused by remember { mutableStateOf(false) }

TextField(
        value = text,
        modifier = Modifier.focusObserver { isFocused = it.isFocused }
                .then(
                Modifier.drawIndicatorLine(
                        lineWidth = when(isFocused) {
                            true -> 2.dp   //indicatorWidth = 2.dp if focused
                            false -> 1.dp  //indicatorWidth = 1.dp if unfocused
                        },
                        color = Color.White ) //background color
        ),
        onValueChange = {
            text = it
        },
        label = { Text("Label") },
 )

con:

private fun Modifier.drawIndicatorLine(lineWidth: Dp, color: Color): Modifier {
    return drawInFront {
        val strokeWidth = lineWidth.value * density
        val y = size.height - strokeWidth / 2
        drawLine(
                color,
                Offset(0f, y),
                Offset(size.width, y),
                strokeWidth
        )
    }
}
/**
 * Draw into a [Canvas] in front the modified content.
 */
fun Modifier.drawInFront(
        onDraw: DrawScope.() -> Unit
) = this.then(DrawBackgroundModifier(onDraw))

private class DrawBackgroundModifier(
        val onDraw: DrawScope.() -> Unit
) : DrawModifier {
    override fun ContentDrawScope.draw() {
        drawContent()
        onDraw()
    }
}

Si utiliza TextField en que puedes dar el activeColor para Color.Transparent

Nota: activeColor no es solo para indicador, es para indicador de fondo de etiqueta y cursor

Ex:

    var text: String by mutableStateOf("")
    TextField(value = text, onValueChange = {
        text = it
    }, activeColor = Color.Transparent)

Según el documento, activeColor es

activeColorea el color de la etiqueta, el indicador inferior y el cursor cuando el campo de texto está enfocado

Si quieres usar el tuyo propio puedes probar BaseTextField

Esto se ha cambiado en la reciente versión Beta de Jetpack Compose UI 1.0.0-beta01 ahora puedes pasar el

TextFieldDefaults con los colores deseados.

 colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            backgroundColor = Color.LightGray,
        )

ejemplo

TextField(
        value = searchText,
        onValueChange = { Log.d(HOME_COMPONENT, it) },
        label = { Text(text = "Search") },
        shape = RoundedCornerShape(10.dp),
        leadingIcon = {
            Image(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = "search"
            )
        },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            backgroundColor = Color.LightGray,
        )
    )

imagen:

o si desea personalizar el componente de acuerdo con su UI / UX, utilice el BasicTextField

@Composable
fun ToolbarComponent() {
    var searchText by remember { mutableStateOf("") }
    Row(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
    ) {

        Icon(
            painter = painterResource(id = R.drawable.ic_search),
            contentDescription = "search",
            modifier = Modifier.size(20.dp),
            tint = iconTintColor
        )

        Spacer(modifier = Modifier.size(16.dp))

        BasicTextField(
            value = searchText,
            onValueChange = { searchText = it },
            modifier = Modifier
                .background(shape = RoundedCornerShape(10.dp), color = Color.LightGray)
                .fillMaxWidth()
                .padding(16.dp),
            decorationBox = {
                Text(text = "Search")
            }
        )
    }
}

---

---

Utiliza Nuestro Buscador