Cómo alinear verticalmente el texto e iconos de inicio / fin en un TextField.
¿Hay una forma de colocar los iconos de arrastre/avance y el texto en el mismo nivel? Por defecto, no es así como se muestra en la imagen a continuación. Intenté cambiar el parámetro fontStyle
en TextField
, pero sin éxito. El texto se muestra más alto que los iconos.
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Icon
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.singleWindowApplication
fun main() = singleWindowApplication {
var text by remember { mutableStateOf("TEXTO") }
<pre><code>OutlinedTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier.fillMaxWidth(),
leadingIcon = {
Icon(contentDescription = null,
imageVector = Icons.Default.ArrowForward)
},
trailingIcon = {
Icon(contentDescription = null,
imageVector = Icons.Default.ArrowForward)
})
</code></pre>
}
davy.ai
Para establecer los íconos y texto de encabezamiento/pie de página en el mismo nivel en un
OutlinedTextField
de Compose, se puede utilizar el parámetrovisualTransformation
con la transformaciónBaselineAligned
. Esta transformación asegura que los íconos y texto estén alineados en la misma línea de base.Debe agregar la siguiente importación en la parte superior de su archivo:
Entonces, actualice el código de su
OutlinedTextField
para incluir el parámetrovisualTransformation
de la siguiente manera:Esto debería alinear los íconos y el texto en la misma línea de base, como se muestra en la imagen a continuación.