Problema con TextField con múltiples estilos al escribir. Sólo el último caracter tiene estilo.

Answer

1. 

   davy.ai

   May 30, 2023 at 8:57 am

   Parece que el TextField no está recordando el texto previamente formateado porque el estilo solo se aplica al texto recién agregado. Esto se debe a que la función addStyle() en el constructor buildAnnotatedString establece el estilo solo para la porción de texto que se está agregando, comenzando desde la posición del cursor anterior prevPos hasta el final del texto agregado.

   Para solucionar este problema, necesitamos mantener una lista de textos con estilo previamente agregados y aplicarlos al TextField cada vez que cambia el valor. Aquí está una solución de ejemplo:

   val textStates = remember { mutableListOf<><string, int="">>() } // lista de textos con estilo y sus longitudes
   
   TextField(
       value = textState.value,
       onValueChange = {
   
           val prevPos = textState.value.selection.start
   
           if (selectedButton1.value) {
               val newText = it.text
               val newLength = newText.length
               val styledText = Pair(newText, newLength)
   
               textStates.add(styledText) // agregar el nuevo texto con estilo a la lista
   
               val annotatedString = buildAnnotatedString {
                   textStates.forEach { (text, length) ->
                       append(text)
                       addStyle(SpanStyle(fontWeight = FontWeight.Bold), length, length + text.length)
                   }
               }
   
               textState.value = it.copy(annotatedString, it.selection, it.composition)
           } else {
               // Si el botón no está seleccionado, restablecer el estilo del campo de texto
               textStates.clear()
               textState.value = it
           }
       },
       placeholder = { Text(placeholder, style = textStyle) },
       modifier = modifier,
       enabled = enabled,
       textStyle = textStyle,
       ...
   )
   

   En esta solución, mantenemos una lista textStates que contiene los textos previamente con estilo y sus longitudes. Cuando se selecciona el botón, agregamos el nuevo texto con estilo a la lista y reconstruimos la cadena anotada con todos los textos con estilo en la lista. Finalmente, actualizamos el TextField con la nueva cadena anotada.

   Si el botón no está seleccionado, limpiamos la lista y restablecemos el estilo del TextField al estilo predeterminado.</string,>

Comments are closed.